How to place label of component horizontally in GridLayout?

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.


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.

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?

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.

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:

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.