Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Recent Posts
Vaadin Forum4. Other

How to place label of component horizontally in GridLayout?

Andy A
7 years ago Jul 16, 2015 3:18am

I use GridLayout and when I place a component (radio button, text, drop down list ...etc.) in it, the label is on top of the component.  How can I make it so the label is next to the component.  If I use the FormLayout then the label is next to the component but not GridLayout.

Thanks

Michael Tzukanov
7 years ago Jul 20, 2015 11:12am

It's a trick that the FormLayout does, not easy to implement on your own. You can try to customizing v-caption-on-top stylename or remove it from the component.
I guess the easiest would be to simply create new labels instead of captions.
 

Andy A
7 years ago Jul 21, 2015 3:43am

I added a label and removed the caption. I added the label on the first column and the radio buttons on the 2nd column of the same row but it looks like the radio buttons are positioned a little bit lower than the label.  Do you know why?

Michael Tzukanov
7 years ago Jul 21, 2015 5:57am

Probably some margins/paddings. Either add the necessary paddings or you can set vertical alignment for both the label and the component to middle, should be enough.

Marius Reinwald
7 years ago Jul 21, 2015 6:25am

FYI In the new maven example archetype they use a ValoTheme Style that positions the Caption of a Textfield to the left of the Component. You can see that on the Login Screen:
https://vaadin.com/blog/-/blogs/vaadin-7-3-7-and-new-maven-archetypes

Edit: After i looked at it again now it seems like they use a Formlayout so i'm not entirely sure if it might just be that and not a style.

Another Edit: While it is possible to do with css (using mainly display:inline-block) it is probably easer to just a CssLayout/Horizontallayout, a label and a seperate Textfield.

+1