123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- ---
- title: FormLayout
- order: 5
- layout: page
- ---
-
- [[layout.formlayout]]
- = FormLayout
-
- ifdef::web[]
- [.sampler]
- image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/form-layout"]
- endif::web[]
-
- [classname]#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. [classname]#FormLayout# is an ordered layout and much like
- [classname]#VerticalLayout#. For description of margins, spacing, and other
- features in ordered layouts, see
- <<layout-orderedlayout#layout.orderedlayout, "VerticalLayout and HorizontalLayout">>.
-
- The following example shows typical use of [classname]#FormLayout# in a form:
-
-
- [source, java]
- ----
- FormLayout form = new FormLayout();
- TextField tf1 = new TextField("Name");
- tf1.setIcon(VaadinIcons.USER);
- tf1.setRequiredIndicatorVisible(true);
- form.addComponent(tf1);
-
- TextField tf2 = new TextField("Street address");
- tf2.setIcon(VaadinIcons.ROAD);
- form.addComponent(tf2);
-
- TextField tf3 = new TextField("Postal code");
- tf3.setIcon(VaadinIcons.ENVELOPE);
- form.addComponent(tf3);
- // normally comes from validation by Binder
- tf3.setComponentError(new UserError("Doh!"));
- ----
-
- The resulting layout will look as follows. The error message shows in a tooltip
- when you hover the mouse pointer over the error indicator.
-
- [[figure.layout.formlayout]]
- .A [classname]#FormLayout# Layout for Forms
- image::img/formlayout-example1.png[width=50%, scaledwidth=70%]
-
- [[layout.formlayout.css]]
- == CSS Style Rules
-
-
- [source, css]
- ----
- .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. */
-
- /* Overall style of field rows. */
- .v-formlayout-row {}
- .v-formlayout-firstrow {}
- .v-formlayout-lastrow {}
-
- /* Required field indicator. */
- .v-formlayout .v-required-field-indicator {}
- .v-formlayout-captioncell .v-caption
- .v-required-field-indicator {}
-
- /* Error indicator. */
- .v-formlayout-cell .v-errorindicator {}
- .v-formlayout-error-indicator .v-errorindicator {}
- ----
-
- The top-level element of [classname]#FormLayout# has the
- [literal]#++v-formlayout++# style. The layout is tabular with three columns: the
- caption column, the error indicator column, and the field column. These can be
- styled with [literal]#++v-formlayout-captioncell++#,
- [literal]#++v-formlayout-errorcell++#, and
- [literal]#++v-formlayout-contentcell++#, respectively. While the error indicator
- is shown as a dedicated column, the indicator for required fields is currently
- shown as a part of the caption column.
-
- For information on setting margins and spacing, see also
- <<layout-orderedlayout#layout.orderedlayout.spacing,"Spacing
- in Ordered Layouts">> and
- <<layout-settings#layout.settings.margins, "Layout Margins">>.
|