java - Vaadin - Responsive Columns

Question

I'm new to using Vaadin and have been trying to work out how I can make 2 Components be side by side when at full screen, but then stack on top of each other when the screen is mobile.

My current understanding is that a HorizontalLayout puts things side by side. And a VerticalLayout puts things on top of one another. So how do I go about using the functionality from both?

Answer 1

You need to look into using a different Layout type. Vaadin offers you a CssLayout and CustomLayout as well as the standard Vertical and Horizontal.

My personal favourite at the moment is using a CssLayout and then using a custom CSS Grid to make the components responsive.

Java:

@StyleSheet("MyStyleSheet.css")
public class ResponsiveLayout extends CssLayout {

    private static final long serialVersionUID = -1028520275448675976L;
    private static final String RESPONSIVE_LAYOUT = "responsive-layout";
    private static final String LABEL_ONE = "label-one";
    private static final String LABEL_TWO = "label-two";

    private Label labelOne = new Label();
    private Label labelTwo = new Label();

    public ResponsiveLayout() {
        config();
        addComponents(labelOne, labelTwo);
    }

    private void config() {
        addStyleName(RESPONSIVE_LAYOUT);
        labelOne.addStyleName(LABEL_ONE);
        labelTwo.addStyleName(LABEL_TWO);
    }
}

CSS:

.responsive-layout {
    display: grid !important;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    display: -ms-grid !important; /* IE */
    -ms-grid-rows: auto; /* IE */
    -ms-grid-columns: 1fr 1fr;  /* IE */
}

.label-one {
    grid-column: 1;
    -ms-grid-column: 1;  /* IE */
}

.label-two {
    grid-column: 2;
    -ms-grid-column: 2;  /* IE */
}

@media all and (max-width : 992px) {
    .responsive-layout {
        grid-template-columns: 1fr;
        -ms-grid-columns: 1fr;  /* IE */
    }

    .label-one {
        grid-column: 1;
        -ms-grid-column: 1;  /* IE */
    }

    .label-two {
        grid-column: 1;
        -ms-grid-column: 1;  /* IE */
    }
}