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

element: Custom CSS properties available for styling 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.5.15 | 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

    @Deprecated
@Tag("vaadin-form-layout")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.5.12") @NpmPackage(value="@vaadin/form-layout",version="23.5.12") @NpmPackage(value="@vaadin/vaadin-form-layout",version="23.5.12")
@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
    Deprecated.
    since v23.3, generated classes will be removed in v24.

    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 properties available for styling
    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()
        Deprecated.

    • Method Detail

      • getResponsiveStepsJsonObject

        @Deprecated
protected elemental.json.JsonObject getResponsiveStepsJsonObject()
        Deprecated.
        since v23.3, generated classes will be removed in v24.

        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

        @Deprecated
protected void setResponsiveSteps​(elemental.json.JsonObject responsiveSteps)
        Deprecated.
        since v23.3, generated classes will be removed in v24.

        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

        @Deprecated
protected void updateStyles​(elemental.json.JsonObject _Args)
        Deprecated.
        since v23.3, generated classes will be removed in v24.

        Description copied from corresponding location in WebComponent:

        Set custom CSS property values and update the layout.

        Parameters:

        _Args - Missing documentation!