How to place label of component horizontally in GridLayout?

General
1

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

2

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.

3

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?

4

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.

5

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.