Default number of columns in FormLayout is 2.
How it is defined ?
I tried to obtain ResponsiveSteps after creating FormLayout with getResponsiveSteps, but it has returned empty collection.
How can I change it ? With help of setResponsiveSteps ?
You can use setResponsiveSteps in Java like this:
layout.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.TOP),
new ResponsiveStep("600px", 1, LabelsPosition.ASIDE));
The example above specifies breakpoint at 600px, with the label to the side. At resolutions lower than 600px, the label will be at the top. In both cases there is only 1 column. The example below will show 2 columns if width is >= 900px.
layout.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.TOP),
new ResponsiveStep("900px", 2, LabelsPosition.ASIDE));
If you want a row to take up two columns, you can set the colspan directly on the element:
formItem.getElement().setAttribute("colspan", "2");
Thank you for your explanation of ResponsiveSteps. I haven’t found guide, describing it. What default responsive steps settings for FormLayout ?
I have noticed, that by default vaadin places fields in FormLayout as a flow left-to-right, top-to-bottom and each row contains not more than two fields (on desktop).
Is where a way manage this flow ? E.g.if there something like newline break, to force placing followong fields starting from next row ?
Hi Vitalii,
There are a few examples here: https://vaadin.com/components/vaadin-form-layout/java-examples. You can definitely have more than 2 columns. Don’t know about left-to-right and top-to-bottom. If the FormLayout is just using Flex to control layout, it should be possible to change it, but I don’t know.
I have found description of default responsive steps settings for FormLayout in https://github.com/vaadin/flow/blob/master/flow-components-parent/flow-generated-components/src/main/java/com/vaadin/flow/component/formlayout/GeneratedVaadinFormLayout.java
- 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.
And there also, the answer is on my second question:
Is where a way manage this flow ? E.g.if there something like newline break, to force placing followong fields starting from next row ?
<h3>Explicit New Row</h3>
* <p>
* Use the {@code <br>} line break element to wrap the items on a new row:
* </p>
...
BR actually is not the solution. I want sorting that way, that first 1-5 components will be in first column and than 6-10 components will be in 2nd column.
So when the columns collapses into one, they will be in order 1-10.
Michael,
I don’t know how the form layout works internally. You could try to set the CSS order property (see https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
If that doesn’t work, the only option might be to do your own layout using a flexbox with the order set on the children. If you don’t need support for the label alignment (top/aside) and error messages that form layout offers, it should be fairly easy to implement.
Form, Vertical and Horizontal Layout completely sucks in creating visually nice forms … and also whole components sucks, as … label is never aside. NEVER.
Hi Michael!
Sorry for the lousy experience. We agree with your statement about the layouts being unfit for creating nice forms. While we don’t have anything concrete yet, we are planning on redesigning Form Layout to better fit real world use cases.
About labels specifically, I’ll note that with Form Layout it’s possible that you actually have two labels for a single component: one which is managed by the component and another which is managed by the layout. The one managed by the layout can be aside the component, while the one managed by the component is always going to stay above the field. I’m wondering if this is what you are referring to.
Hi Jouni.
Sorry for my previous frustrated comment, we have deadline in 2 days and now I know it will pass around 
Finally I managed to format the form, it’s not 100% nice when responsive, but it’s OK.
And solution:
- for Label.ASIDE - Component (here TextField) must be without Label, Label is added through addFormItem, than ResponsiveSteps works. TextField must have width 100%
txtId = new TextField();
txtId.setReadOnly(true);
txtId.setWidthFull();
txtEmail = new TextField();
txtEmail.setWidthFull();
FormLayout pnlLeft = new FormLayout();
pnlLeft.addFormItem(txtId, "Sys ID");
pnlLeft.addFormItem(txtEmail, "Email");
pnlLeft.setResponsiveSteps(Arrays.asList(
new FormLayout.ResponsiveStep("0em", 1, FormLayout.ResponsiveStep.LabelsPosition.TOP),
new FormLayout.ResponsiveStep(PANEL_FLEX_BASIS, 1, FormLayout.ResponsiveStep.LabelsPosition.ASIDE)
));
Div pnlLeftWrapper = new Div();
pnlLeftWrapper.getStyle().set("flex-basis", PANEL_FLEX_BASIS);
pnlLeftWrapper.getStyle().set("flex-grow", "1");
pnlLeftWrapper.add(pnlLeft);
- to define responsivness for Horizontal and Vertical Layout, style must be set
layout.getStyle().set("flex-wrap", "wrap");
Greetings!
First of all we use Vaadin Flow 14.4.6, newest Chrome and newest Firefox. (Btw we use MultiselectComboBox add-on in the project but not on this FormLayout).
It would be nice if we can control the formLayout’s fields order. Up to down instead of left to right. Or it would even better if the tabIndex worked. Even if I thought I set the tabIndeces to manage to jump from one field to another from top to bottom, it doesn’t work.
I have 3 columns and 3 rows. So I tried the following: I set the first (the first I added to the formLayout) field’s tabIndex to 1, the second field’s tabIndex to 4, the 3rd to 7, the 4th to 2 and so on…
1 4 7
2 5 8
3 6 9
But when I press tab from the first field it jumps on to it’s right neighbor (which tabIndex is 4). So the tabs travers on the HTML-s field older.
It would be nice if someone can help me, thanks in advance!
P.S: I thought I can use 3 pieces 1-column FormLayout in the main/outer FormLayout, but I hope there is a nicer solution