Vaadin - Responsive Columns

Question

I am new to using Vaadin and trying to figure out how I can make 2 components side by side when in full screen, and then stack on top of each other when the screen is mobile.

My real understanding is that HorizontalLayout puts things side by side. And VerticalLayout puts things on top of each other. So, how do I use functionality from both?

Answer 1

You need to learn a different type of layout. Vaadin offers you CssLayout and CustomLayout, as well as standard vertical and horizontal.

My personal favorite currently uses CssLayout and then uses custom CSS Grid to respond to components.

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 */
    }
}

Answer 2

Vaadin. ​​ flexboxgrid

@Override
public void enter(ViewChangeListener.ViewChangeEvent event) {
    ResponsiveLayout responsiveLayout = new ResponsiveLayout();

    responsiveLayout.setSizeFull();

    ResponsiveRow rowOne = responsiveLayout.addRow();

    Button deleteButton = new Button("", VaadinIcons.TRASH);
    deleteButton.addStyleName(ValoTheme.BUTTON_DANGER);
    deleteButton.setSizeFull();

    Button commentButton = new Button("",VaadinIcons.COMMENT);
    commentButton.addStyleName(ValoTheme.BUTTON_PRIMARY);
    commentButton.setSizeFull();

    Button editButton = new Button("", VaadinIcons.EDIT);
    editButton.addStyleName(ValoTheme.BUTTON_FRIENDLY);
    editButton.setSizeFull();

    rowOne.addColumn().withDisplayRules(12,6,4,4).withComponent(deleteButton);
    rowOne.addColumn().withDisplayRules(12,6,4,4).withComponent(commentButton);
    rowOne.addColumn().withDisplayRules(12,6,4,4).withComponent(editButton);

    ResponsiveRow rowTwo = responsiveLayout.addRow();

    Label labelOne = new Label("LABEL 1");
    Label labelTwo = new Label("LABEL 2");

    rowTwo.addColumn().withDisplayRules(12,6,4,4).withComponent(labelOne);
    rowTwo.addColumn().withDisplayRules(12,6,4,4).withComponent(labelTwo);

    setSizeFull();

    addComponent(responsiveLayout);
}

Answer 3

You can combine your layouts, you can put two horizontal layouts in a vertical layout. Think of boxes in boxes. From there, you can fine-tune your layout through css, just parse the generated HTML.

Some time ago, they had a webinar about layouts . Perhaps this helps.