I would like to have all text field captions to be to the left of the text field instead of above like default. How can I do this? My CSS skills are even worse than my Vaadin skills I’m afraid.
Use FormLayout for that. You might even consider using Form.
Yep, that certainly does the trick but I was hoping I wouldn’t have to change all the layouts. I guess I should have thought that before I wrote all that code. It’s all fixed now.
Yes, I agree… this would be a whole lot fancier if you could tell the component either directly or through CSS where to place the text - preferably CSS because this is a layout/theming thing… ne?
We also had the same problem.
It will be good if someone would provide an exemple that allow us to change the layout of the textfield label. 
Have no knowledge on that sorry …
greetings
Hello,
Now with the new “Form with advanced layout” maybe we can raise the question again…
By default, the FormLayout put the field caption on the left side of the box.
I think, when we use “Form with advanced layout” it would be nice to preserve the consistency
and maintain the caption on the left side of the box, rather than top.
What do you think?!
FormLayout always puts captions left of the field (at least when the field does not manage its own caption), and also contains a column for the error indicator. The other standard layouts put the caption above the field.
The “Form with advanced layout” sample just demonstrates how you can use a form with a layout other than FormLayout and have control over field placement. All characteristics of the other layout apply in this case. Note also that in that particular example, the form width would be a problem if all captions would be to the left of the corresponding fields.
If you do want full control over where the explanatory labels are placed, you could add labels to the layout instead of using captions, or use a CustomLayout for the form - it does automatic mapping of fields, and you can write the labels/captions in the HTML.
So, could someone confirm that:
There’s no way to force CustomLayout to place the captions on the left side. The only way to achieve such a result is to not use captions and provide the labels from the html layout instead.
If true, I think it would be nice to have a way to control this from the css, for example.
Best regards.
Can’t confirm that, sorry. 
You can set [tt]
display: inline-block
[/tt] for the [tt]
v-caption
[/tt] style class in the component’s caption element in the CustomLayout. Notice that if the caption+field are too long, they will wrap and it’s not easy to align such fields properly; the example uses a fixed width for the captions. This is therefore kind of a hack that might break easily.
See an
on-line example
.
If you want the caption to come from code instead of HTML, you can always use Labels for captions. You could also put a layout component, such as FormLayout or CssLayout, between the CustomLayout and the field.
But, FormLayout is much easier for layouts where components are in a vertical column with the captions on the left.
Nice to hear that. 
I’ve tested it and works, and as you warned, long captions are now shown correctly.
I’m trying to use CustomLayout for a form because I want to add some “cosmetics” to it, something like sections, grouping fields together. I didn’t find any other way to do something like this, but perhaps I’m wrong (again).
Thanks a lot for your kind support.
You could consider overriding the [tt]
attachField()
[/tt] method in Form to add cosmetics, grouping, etc.
See an
on-line example
.
I suppose you could also override FormLayout to customize it.
You can also add non-field components with [tt]
getLayout().addComponent()
[/tt] to a form.
Hello Marko,
I tryied to add “display: inline-block” as mentioned in a early post, but it’s not working, the caption is always on top of the Textfields
I want to use this adaptation for horizontalLayout, as verticalLayout
Could you give me more details on what/how to adapt?
thanks a lot in advance
Chris.
Hei Chris,
4 years and no answer BTW, did you manage to align the caption to the left?
With the current latest Vaadin version (7), you can maybe use CssLayout.
But in Horizontal or Vertical layout,
display: inline-block;
works only with a fixed component size, which is less then (parent size - caption size). At least this is how I manage to trick it for now. I’m pretty sure it should be possible with some extensive CSS knowledges, and I think that also the layout div itself should have some custom styling done.
.v-caption-horizontal {
display: inline-block;
}
[/code][code]
textField.addStyleName("horizontal");
textField.setWidth("100px");But in any case, a UI form should allign fields one against the other. Using individual left aligned captions in a VerticalLayout for instance will look pretty messy (maybe). So FormLayout might be a better choice.
Cheers,
Bogdan.
Hi,
Please, how to set TextField caption position, for example: in the left
Thank you.
Hi Chams, have you tried using a FormLayout?
-Olli
And if FormLayout isn’t an option, sometimes using a separate Label instead of the built-in caption can be helpful, possibly with an additional wrapper layout to keep them as a coherent unit.
I don’t understand where do people see difficult here. Nothing prevents you to change your CSS accordingly to your needs; there’s no need to stick specifically to CssLayout or whatever. Simply right-click on the element, open browser Inspector, change your styles as you need and then copy the styles and make them perpetual on your CSS style sheet. Add style names to your components as needed, too, and enclose them in Horizontal or VerticalLayout (adding style names as weel if needed) in case you need some specificness.
For instance, I just changed via CSS the position of a DateField to be in line with the field itself, on a form which is a series of “lines” which are HorizontalLayouts with a couple of fields on a bigger, enclosing VerticalLayout (which puts those “lines” one after other). The process for doing it on a TextField or CheckBox chould be pretty much the same.
- Add some style name for the outer, enclosing VerticalLayout, for instance, “enclosingLayout”.
- Add another style name for the “line” of fields and checkboxes, which is an HorizontalLayout, for instance, “myLine”.
- Add your field(s) to your .myLine layout.
Apply these css styles to your stylesheet (I’m using less/sass notation here):
.enclosingLayout {
.myLine {
.v-widget .v-caption.v-caption-horizontal {
vertical-align: middle !important;
display: inline-block !important;
margin-right: 5px !important;
padding-bottom: 0px;
}
}
}
And that’s all; just basic CSS. Cannot understand any supposed “fixed component size limitations” stated by Bogdan Udrescu in his reply, althought I’m not using CssLayout and I could be wrong.