element: Custom CSS property Description Default --vaadin-form-layout-column-spacing Length of the spacing between columns 2em ">

element: Custom CSS property Description Default --vaadin-form-layout-column-spacing Length of the spacing between columns 2em ">

com.vaadin.flow.component.formlayout.GeneratedVaadinFormLayout API 23.1.17 | Vaadin
Contact us
Create app
You're viewing an older version of Vaadin JavaDoc. Please see version 24.7.0 for the latest.
com.vaadin.flow.component.formlayout.

Class GeneratedVaadinFormLayout<R extends GeneratedVaadinFormLayout<R>>

  • All Implemented Interfaces:

    AttachNotifier, DetachNotifier, HasElement, HasStyle, Serializable

    Direct Known Subclasses:

    FormLayout

    @Tag("vaadin-form-layout")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.1.15") @NpmPackage(value="@vaadin/form-layout",version="23.1.15") @NpmPackage(value="@vaadin/vaadin-form-layout",version="23.1.15")
@JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/form-layout/src/vaadin-form-layout.js")
public abstract class GeneratedVaadinFormLayout<R extends GeneratedVaadinFormLayout<R>>
extends Component
implements HasStyle

    Description copied from corresponding location in WebComponent:

    <vaadin-form-layout> is a Web Component providing configurable responsive layout for form elements.

    <vaadin-form-layout>

    <vaadin-form-item> <label slot="label">First Name</label> <input class="full-width" value="Jane"> </vaadin-form-item>

    <vaadin-form-item> <label slot="label">Last Name</label> <input class="full-width" value="Doe"> </vaadin-form-item>

    <vaadin-form-item> <label slot="label">Email</label> <input class="full-width" value="jane.doe@example.com"> </vaadin-form-item>

    </vaadin-form-layout>

    It supports any child elements as layout items.

    By default, it makes a layout of two columns if the element width is equal or wider than 40em, and a single column layout otherwise.

    The number of columns and the responsive behavior are customizable with the responsiveSteps property.

    Spanning Items on Multiple Columns

    You can use colspan attribute on the items. In the example below, the first text field spans on two columns:

    <vaadin-form-layout>

    <vaadin-form-item colspan="2"> <label slot="label">Address</label> <input class="full-width"> </vaadin-form-item>

    <vaadin-form-item> <label slot="label">First Name</label> <input class="full-width" value="Jane"> </vaadin-form-item>

    <vaadin-form-item> <label slot="label">Last Name</label> <input class="full-width" value="Doe"> </vaadin-form-item>

    </vaadin-form-layout>

    Explicit New Row

    Use the <br> line break element to wrap the items on a new row:

    <vaadin-form-layout>

    <vaadin-form-item> <label slot="label">Email</label> <input class="full-width"> </vaadin-form-item>

    <br>

    <vaadin-form-item> <label slot="label">Confirm Email</label> <input class="full-width"> </vaadin-form-item>

    </vaadin-form-layout>

    CSS Properties Reference

    The following custom CSS properties are available on the <vaadin-form-layout> element:

    Custom CSS property Description Default
    --vaadin-form-layout-column-spacing Length of the spacing between columns 2em

    See Also:

    Serialized Form

    • Constructor Detail

      • GeneratedVaadinFormLayout

        public GeneratedVaadinFormLayout()

    • Method Detail

      • getResponsiveStepsJsonObject

        protected elemental.json.JsonObject getResponsiveStepsJsonObject()

        Description copied from corresponding location in WebComponent:

        Allows specifying a responsive behavior with the number of columns and the label position depending on the layout width.

        Format: array of objects, each object defines one responsive step with minWidth CSS length, columns number, and optional labelsPosition string of &quot;aside&quot; or &quot;top&quot;. At least one item is required.

        Examples

        javascript formLayout.responsiveSteps = [ columns: 1]; // The layout is always a single column, labels aside.}

        javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1}, {minWidth: '40em', columns: 2} ]; // Sets two responsive steps: // 1. When the layout width is &lt; 40em, one column, labels aside. // 2. Width &gt;= 40em, two columns, labels aside.

        javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1, labelsPosition: 'top'}, {minWidth: '20em', columns: 1}, {minWidth: '40em', columns: 2} ]; // Default value. Three responsive steps: // 1. Width &lt; 20em, one column, labels on top. // 2. 20em &lt;= width &lt; 40em, one column, labels aside. // 3. Width &gt;= 40em, two columns, labels aside.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:

        the responsiveSteps property from the webcomponent

      • setResponsiveSteps

        protected void setResponsiveSteps​(elemental.json.JsonObject responsiveSteps)

        Description copied from corresponding location in WebComponent:

        Allows specifying a responsive behavior with the number of columns and the label position depending on the layout width.

        Format: array of objects, each object defines one responsive step with minWidth CSS length, columns number, and optional labelsPosition string of &quot;aside&quot; or &quot;top&quot;. At least one item is required.

        Examples

        javascript formLayout.responsiveSteps = [ columns: 1]; // The layout is always a single column, labels aside.}

        javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1}, {minWidth: '40em', columns: 2} ]; // Sets two responsive steps: // 1. When the layout width is &lt; 40em, one column, labels aside. // 2. Width &gt;= 40em, two columns, labels aside.

        javascript formLayout.responsiveSteps = [ {minWidth: 0, columns: 1, labelsPosition: 'top'}, {minWidth: '20em', columns: 1}, {minWidth: '40em', columns: 2} ]; // Default value. Three responsive steps: // 1. Width &lt; 20em, one column, labels on top. // 2. 20em &lt;= width &lt; 40em, one column, labels aside. // 3. Width &gt;= 40em, two columns, labels aside.

        Parameters:

        responsiveSteps - the JsonObject value to set

      • updateStyles

        protected void updateStyles​(elemental.json.JsonObject _Args)

        Description copied from corresponding location in WebComponent:

        Set custom CSS property values and update the layout.

        Parameters:

        _Args - Missing documentation!