Managing Layout

.v-gridlayout-gridexpandratio .v-label { text-align: left;

background: #ffffc0; /* Pale yellow */

}

You should beware of margin, padding, and border settings in CSS as they can mess up the layout. The dimensions of layouts are calculated in the Client-Side Engine of Vaadin and some settings can interfere with these calculations. For more information, on margins and spacing, see Section 6.13.3, “Layout Cell Spacing” and Section 6.13.4, “Layout Margins”

6.5. FormLayout

FormLayout lays the components and their captions out in two columns, with optional indicators for required fields and errors that can be shown for each field. The field captions can have an icon in addition to the text.

//A FormLayout used outside the context of a Form FormLayout fl = new FormLayout();

//Make the FormLayout shrink to its contents fl.setSizeUndefined();

TextField tf = new TextField("A Field"); fl.addComponent(tf);

// Mark the first field as required tf.setRequired(true);

tf.setRequiredError("The Field may not be empty.");

TextField tf2 = new TextField("Another Field"); fl.addComponent(tf2);

// Set the second field straing to error state with a message. tf2.setComponentError(

new UserError("This is the error indicator of a Field."));

The resulting layout will look as follows. The error message shows in a tooptip when you hover the mouse pointer over the error indicator.

Figure 6.6. A FormLayout Layout for Forms

CSS Style Rules

.v-formlayout {}

.v-formlayout .v-caption {}

/* Columns in a field row. */

.v-formlayout-contentcell {} /* Field content. */

.v-formlayout-captioncell {} /* Field caption. */

.v-formlayout-errorcell {} /* Field error indicator. */

FormLayout

183