Empty FormLayout Item
This provides possibility to leave an item slot of FormLayout visually empty
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%"); } }
Links
Compatibility
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