Directory

← Back

Empty FormLayout Item

This provides possibility to leave an item slot of FormLayout visually empty

Author

Rating

Popularity

<100

By adding an EmptyFormLayoutItem to a FormLayout, you can leave an item slot empty. This is useful for complete customisation of your FormLayout. You can also use it to create an empty row within a FormLayout so you don't have to create 2 separate FormLayouts.

This is best used with FormLayouts that have only 1 ResponsiveStep defined. Because otherwise you have not enough control over where the empty slot is placed.

Sample code

@Route("")
public class DemoView extends Div {
    private TextField textField1, textField2, textField3, textField4;

    public DemoView(){
        addLayout();
    }

    private void addLayout() {
        initializeTextFields();

        FormLayout formLayout = new FormLayout();
        formLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 2));
        formLayout.setWidth("500px");
        formLayout.getStyle().set("border", "1px solid black");
        formLayout.add(
                textField1,                 textField2,
                textField3,                 new EmptyFormLayoutItem(),
                new EmptyFormLayoutItem(),  new EmptyFormLayoutItem(),
                new EmptyFormLayoutItem(),  textField4
        );

        add(formLayout);
    }

    private void initializeTextFields() {
        textField1 = new TextField("foo");
        textField1.setPlaceholder("bar");
        textField1.setWidth("100%");
        textField2 = new TextField("foo");
        textField2.setPlaceholder("bar");
        textField2.setWidth("100%");
        textField3 = new TextField("foo");
        textField3.setPlaceholder("bar");
        textField3.setWidth("100%");
        textField4 = new TextField("foo");
        textField4.setPlaceholder("bar");
        textField4.setWidth("100%");
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Demo View was broken in previous versions.

Released
2019-07-19
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 13+
Browser
N/A

Empty FormLayout Item - Vaadin Add-on Directory

This provides possibility to leave an item slot of FormLayout visually empty Empty FormLayout Item - Vaadin Add-on Directory
By adding an EmptyFormLayoutItem to a FormLayout, you can leave an item slot empty. This is useful for complete customisation of your FormLayout. You can also use it to create an empty row within a FormLayout so you don't have to create 2 separate FormLayouts. This is best used with FormLayouts that have only 1 ResponsiveStep defined. Because otherwise you have not enough control over where the empty slot is placed.
Online