Two columns on desktop and one column for mobile

This is what currently I’ve. But I need them to come in two columns and not occupy entire screen for desktop and one column for mobile. This is already a FormLayout but don’t know how to stop this taking only half of the page instead of full page for desktop
image.png

Open the first code example of form layout in the docs and you can find setResponsiveSteps there.

formLayout.setResponsiveSteps(
// Use one column by default
new ResponsiveStep(“0”, 1),
// Use two columns, if layout’s width exceeds 500px
new ResponsiveStep(“500px”, 2));

the problem here is, the fields occupy complete screen

take only half of the page for width exceeds 500px

That isn’t something the form layout can do by default. A quick tip would be to apply max-width to it.

yeah I thought of it. but I do not know how to specify max-width only for width exceeds 500px

It doesn’t matter. A mobile device with > 500px would fall anyway to the second config with two columns :nerd_face:

Meaning: it’s a theoretical problem. Otherwise go with pure css and write media queries.

Looks media query is the only solution to get the desired result

Now I’m getting them in two columns
image.png

You can also configure it on the UI code or even use completely different layout implementation for certain kind of devices:

    @Route
    public class MainView extends VerticalLayout {
    
        HasComponents layout;
    
        public MainView() {
            add(new H1("Hello World"));
            UI.getCurrent().getPage().retrieveExtendedClientDetails(details -> {
                add(new Paragraph("Your screen size is " + details.getScreenWidth() + "x" + details.getScreenHeight()));
                add(new Paragraph("Your window size is " + details.getWindowInnerWidth() + "x" + details.getWindowInnerHeight()));
                add(new Paragraph("Your device pixel ratio is " + details.getDevicePixelRatio()));
                add(new Paragraph("Your devices is " + (details.isTouchDevice() ? "" : "not ") + "a touch device"));
    
                if(details.isTouchDevice()) {
                    layout = new VerticalLayout();
                } else {
                    layout = new FormLayout();
                }
                add((Component) layout);
                addComponents();
            });
        }
    
        private void addComponents() {
            for(int i = 0; i < 10; i++) {
                layout.add(new TextField("Field " + i));
            }
        }
    }

I was looking this for a long time. Conditionally switching to different layouts programmatically.

You also have this addon that does about the same thing: MediaQuery - Vaadin Add-on Directory