3

For example if I have form with 2 columns and 2 rows but want to keep the 2nd column in the first 1st empty how do I do this without adding an empty value (empty Span).

-----------------
| field | empty |
-----------------
| field | field |
-----------------

Right now I'm doing:

formLayout.add(new TextField("First row and first column"));
formLayout.add(new Span());
formLayout.add(...);
.. and so on.

I could just do formLayout.add(textField, new Span(), textField, ...) but in either case my question is how can I have the FormLayout skip a cell in the first row after the initial TextField?

Stephane Grenier
  • 15,527
  • 38
  • 117
  • 192
  • 1
    you could possibly use Form Layout in a composite as shown in: https://vaadin.com/components/vaadin-form-layout/java-examples where they skip the first column, second row – schaphekar Sep 21 '21 at 04:05
  • I actually do this for comboboxes with a button on the left side so that it's a single component in the form. Works great for that. – Stephane Grenier Sep 21 '21 at 17:20

1 Answers1

4

FormLayout is not purposed to be rigid grid. You can add empty components, or Br component to break a row, which will work better than empty Span.

You can also adjust col-span of FormItem to span it wider than a column. But FormLayout is also responsive, so if you make Browser narrower, it will reflow the fields. Empty components would make it look odd as there are not likely to be place as you want.

You can also set responsive steps to control whether four, three, two, .. columns are shown on different Browser widths:

formLayout.setResponsiveSteps(
       new ResponsiveStep("25em", 1),
       new ResponsiveStep("32em", 2),
       new ResponsiveStep("40em", 3));

In theory you can adjust the responsive steps so that layout is more rigid.

I would assume that a Div component where you set css-grid styles according to what you want to achieve may server you better than FormLayout in this case.

Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
  • Thank you. It's not necessarily to be a rigid grid but more that in a form sometimes it's nice to group elements together, and in some cases there may be empty spots to keep things nicely aligned. FormLayout has a lot of advantages that are worth a small workaround for formatting. – Stephane Grenier Sep 21 '21 at 17:18