Setting Field Caption Width to Fixed Width

Vaadin 6 / 7 / 8 Framework UI
1

I have two forms lined up in a vertical layout, and I want all the fields captions (e.g. ‘First name’, ‘Street’) in the forms to be the same width – set by me as shown below:


Form#1
[...First Name]
[--------input box---------------]


Form#2
[.......Street]
[--------input box---------------]

How? Any suggestions please.

Thanks

2

Use FormLayout. Or GridLayout with separate Labels for captions.

3

Hi Marko Grönroos,

Thanks for your response. I am using Form, which uses FormLayout; so presumably, I am already using FormLayout. My updated question now is how do I set the caption (column) width in (say) the FormLayout. If this is not just “one-click” away, then my second choice would be the GridLayout.

Cheers.

4

You should be able to set it with:

.v-form .v-caption {
  width: 100px;
}

Just notice that this will cause problems if a caption is too wide to fit the width. You may want to give also “white-space: normal” to allow wrapping in such a case.

A bit related Knowledge Base article:
#269
.

5

Thanks Marko Grönroos.