Form captions: word wrapping?

I have a client who wants a really long caption for a form element.

The users of this form use a browser and a screen resolution that makes it so that the caption is not entirely visible.

This means that (among other things) the form element is pushed off the screen.

My form is set to 100% width, inside panels all the way up that have defined sizes (usually 100% width).

How can I ensure that the form caption wraps appropriately?


I should mention that I’m using the default FormLayout, or whatever Form uses these days internally. I’m also using Vaadin 6.5.2.

Now, I don’t reach into the Form itself and call getLayout().setWidth(“100%”) on it–should I?

Is there any way to get captions (which I thought were just labels) to wrap?


You need to define a fixed width for the caption and disable the “white-space: nowrap” attribute in CSS.

For example:

.v-form .v-caption {
  width: 100px;
  white-space: normal;
  text-align: left;

Another way is to put a GridLayout as the layout of the form and override attachField() to add the fields to the layout, so that you add the fields in the second grid column and add Label components for the captions in the first column. If you set a fixed width for the caption column, the labels will wrap. This way you can have also otherwise better control over the layout.

Thank you very much; I’m sure this will make the client very happy.