FormLayout auto Responsivness

General
1

Hi everyone,

since 24.8.2 there is a nice feature for form layout which makes it possible to automatically use the width of the screen to show components in a row or break them into cols:

formLayout.setAutoResponsive(true);

Are there any issues when using this as a view? For example (dummycode)

public class MyView extends FormLayout {

    public Formlayout() {
    this.setAutoResponsive(true);
    VerticalLayout left = new VerticalLayout();
    VerticalLayout right = new VerticalLayout();

    addFormRow(left);
    addFormRow(right);
    }
}

So the whole view is automatically switching to “row” when on mobile or are there any problems i am not thinking about?

2

Well… it’s intended to be used for forms… and was purely designed with this in mind - meaning if you encounter “bugs” they are probably never fixed/implemented because you are misusing “Formlayout” completely.

Additionally you don’t know what the inner workings do which could change anytime - for example it might be changed to be a native html form to improve accessibility, which would make your whole page a form. An absolute nightmare.

3

There is an easy alternative for generic layouts by just using a Div component and set of LumoUtility classes for CSS Grid (note FormLayout itself is also CSS Grid, but a bit more specific tuning for Form use cases, e.g. having role=“form” attribute etc.)

var layout = new Div();
layout.addClassNames(LumoUtility.Display.GRID,
        LumoUtility.Grid.FLOW_ROW, LumoUtility.Grid.Column.COLUMNS_1,
        LumoUtility.Grid.Breakpoint.Small.COLUMNS_2,
        LumoUtility.Grid.Breakpoint.Large.COLUMNS_4,
        LumoUtility.Gap.MEDIUM);

See live demo: https://v-herd.eu/tatulund-addons/lazy-component

1 Like