Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 377605

Summary: Layout issue with single-line text input
Product: [RT] RAP Reporter: Gunnar Wagenknecht <gunnar>
Component: RWTAssignee: Project Inbox <rap-inbox>
Status: RESOLVED FIXED QA Contact:
Severity: normal    
Priority: P3 CC: jeick
Version: 1.5   
Target Milestone: ---   
Hardware: All   
OS: All   
Whiteboard:
Attachments:
Description Flags
screenshot
none
screenshot with SWT.CENTER none

Description Gunnar Wagenknecht CLA 2012-04-25 05:02:19 EDT
Created attachment 214513 [details]
screenshot

There seems to be an issue with a single line text input created without border.

The "input" element has a surrounding "div" with a left/right padding of 10px and a top padding of 5px. I think it should not have any padding here and just behave as the other controls used in the same GridLayout. Please have a look at the attached screenshot.

Code:


final Composite container = new Composite(parent, SWT.NONE);
container.setLayout(new GridLayout(2, false));

final Label l1 = new Label(container, SWT.LEFT);
l1.setData(RWT.MARKUP_ENABLED, Boolean.TRUE);
l1.setText("Blah");
l1.setLayoutData(new GridData(SWT.FILL, SWT.BEGINNING, false, false));

final Text text = new Text(container, SWT.SINGLE | SWT.READ_ONLY);
text.setText("Blub");
text.setLayoutData(new GridData(SWT.FILL, SWT.BEGINNING, true, false));

final Label l2 = new Label(container, SWT.LEFT);
l2.setData(RWT.MARKUP_ENABLED, Boolean.TRUE);
l2.setText("Blah");
l2.setLayoutData(new GridData(SWT.FILL, SWT.BEGINNING, false, false));

final Link link = new Link(container, SWT.NONE);
link.setData(RWT.MARKUP_ENABLED, Boolean.TRUE);
link.setText("Link");
link.setLayoutData(new GridData(SWT.FILL, SWT.BEGINNING, true, false));
Comment 1 Gunnar Wagenknecht CLA 2012-04-25 05:13:40 EDT
Browser: Chrome 18.0 on Windows 7
Comment 2 Ivan Furnadjiev CLA 2012-04-25 05:14:40 EDT
Gunnar, the left/right padding of 10px is defined in the Text theming. You could override it by providing a theme contribution. About the top padding of 5px, it is there by design and it is calculated on the client in order to center the HTML "input" field vertically in the Text widget space (height).
Comment 3 Ivan Furnadjiev CLA 2012-04-25 05:16:06 EDT
BTW... there is a top padding of 5px defined in the Text theming too.
Comment 4 Ralf Sternberg CLA 2012-04-25 05:28:14 EDT
Gunnar, did you check the same in SWT? At least on GTK, your code renders exactly as your screenshot. If you want to have Label and Text aligned, I think that you have to use SWT.CENTER instead of SWT.BEGINNING in the GridData. SWT.BEGINNING stands for top aligned.
Comment 5 Ivan Furnadjiev CLA 2012-04-25 05:34:14 EDT
Same on Windows. Changing SWT.BEGINNING to SWT.CENTER for Labels make Label and Text on the same line.
Comment 6 Gunnar Wagenknecht CLA 2012-04-25 05:59:32 EDT
Created attachment 214517 [details]
screenshot with SWT.CENTER

(In reply to comment #4)
> SWT.BEGINNING stands for top aligned.

I didn't try native SWT. But when I use it in RAP it's still off a bit (just by one pixel, though).
Comment 7 Ivan Furnadjiev CLA 2012-04-25 06:07:45 EDT
This one pixel is probably because of the rounding on the client when top padding is calculated (vertical alignment). Is this one pixel critical for you or we could close the bug as invalid?
Comment 8 Gunnar Wagenknecht CLA 2012-04-25 06:30:11 EDT
(In reply to comment #7)
> This one pixel is probably because of the rounding on the client when top
> padding is calculated (vertical alignment). Is this one pixel critical for you
> or we could close the bug as invalid?

I'm not sure the algorithm is too blame. The text height is the same (same font, same font size). Assuming the same algorithm is used for the label and left it should render the same.
Comment 9 Ivan Furnadjiev CLA 2012-04-25 07:35:09 EDT
The problem is that not the same algorithm is used for Label and the Text. Label position is calculated by the server-side (GridLayout), "input" HTML element position inside the Text is calculated by the client-side (BasicText.js#_centerFieldVertically). If I align the "input" element with the Label, assuming GridLayout calculation is the correct one, the "input" element it is not centered vertically anymore.
Comment 10 Gunnar Wagenknecht CLA 2012-04-25 07:43:12 EDT
So as a workaround I can use a Label instead of a read-only input. However, I'll loose the selection behavior. Is it possible to use labels and allow the user to select text (for copy and paste)?
Comment 11 Gunnar Wagenknecht CLA 2012-04-25 07:45:19 EDT
Would it help if I set a fixed height in the GridData on the server? Are there any tools for calculating a height?
Comment 12 Ivan Furnadjiev CLA 2012-04-25 07:57:58 EDT
I'm not sure if this will help... Just give it a try. To calculate the size use Label/Text#computeSize( SWT.DEFAULT, SWT.DEFAULT ).
Comment 13 Gunnar Wagenknecht CLA 2012-04-25 08:30:31 EDT
(In reply to comment #12)
> I'm not sure if this will help... Just give it a try. To calculate the size use
> Label/Text#computeSize( SWT.DEFAULT, SWT.DEFAULT ).

If I set the same heightHint for Label and Link then both are aligned without the off-by-one pixel. However, it doesn't work work for Text. The Text height is always a couple of pixels higher than the heightHint.
Comment 14 Ivan Furnadjiev CLA 2012-04-25 09:00:14 EDT
That's true because Text is Scrollable, Link and Label are not. If you look at RAP/SWT Text compute size method you will see that they end with computeTrim( 0, 0, width, height ). This means that trimming are added to the widthHint/heightHint. The Scrollable trimmings include border, scrollbars *and* padding defined in the teaming. In your case Tex#computeSize( SWT.DEFAULT, 100 ) will return a height value bigger than 100 as padding top/bottom is 5px.
Comment 15 Ivan Furnadjiev CLA 2014-04-10 06:05:08 EDT
*** Bug 432492 has been marked as a duplicate of this bug. ***
Comment 16 Ivan Furnadjiev CLA 2014-04-10 07:56:45 EDT
To align the Label with the Text you could specify verticalIndent of the Label GridData. A value of 2 (3) works for me.
Comment 17 Ivan Furnadjiev CLA 2018-01-30 04:39:18 EST
Label now supports "padding" themeable property. You can use to the vertically allign Text and Lable.