Trouble understanding layout behavior when nesting HorizontalLayouts in Ver

Flow
1

Hi,

I applied scrolling to a VerticalLayout with the recommendation from the [Vaadin 10 docs]
(http://https://vaadin.com/docs/v10/flow/migration/5-components.html):

component.getElement().getStyle().set("overflow", "auto")

Now I’m trying to nest multiple HorizontalLayouts in the VerticalLayout. When there are more HorizontalLayouts than the Screen can fit, a scrollbar correctly appears, but the Spacing between HorizontalLayouts gets messed up. When I replace the HorizontalLayout with Divs, it works as expected.

@BodySize(height = "100vh", width = "100vw")
@HtmlImport("styles/shared-styles.html")
@Route("")
@Theme(Lumo.class)
public class MainView extends VerticalLayout {

    public MainView() {
        setSizeFull();
        setPadding(false);

        VerticalLayout withHorizontalLayout = new VerticalLayout();
        withHorizontalLayout.setHeight("100%");
        withHorizontalLayout.setWidth("50%");
        withHorizontalLayout.setPadding(false);
        withHorizontalLayout.getElement().getStyle().set("overflow", "auto");

        for (int i = 0; i < 100; i++)
            withHorizontalLayout.add(new HorizontalLayout(new Button(new Icon(VaadinIcons.BUG)),
                    new Label("horizontallayout")));

        VerticalLayout withDivs = new VerticalLayout();
        withDivs.setHeight("100%");
        withDivs.setWidth("50%");
        withDivs.setPadding(false);
        withDivs.getElement().getStyle().set("overflow", "auto");

        for (int i = 0; i < 100; i++)
            withDivs.add(new Div(new Button(new Icon(VaadinIcons.BUG)), new Label("div")));

        HorizontalLayout horizontalLayout = new HorizontalLayout(withHorizontalLayout, withDivs);
        horizontalLayout.setSizeFull();
        add(new Label("Test"), horizontalLayout);
    }

}

![Image]
(http://fs1.directupload.net/images/180406/gm8klg5m.png)

17036130.png

2

Hello!

In Vaadin 10, VerticalLayout and HorizontalLayout are flexbox layouts ([details here if interested]
(https://css-tricks.com/snippets/css/a-guide-to-flexbox/)).

This means that the items inside the layouts can grow and shrink flexibly so that everything fits the container nicely. In your use-case this is a problem, because you want the HorizontalLayouts to overflow over the limits of the container, but instead they try to fit inside it by shrinking.

The shrinking behaviour can be disabled by setting the CSS-property flex-shrink to 0 for the HorizontalLayouts. You can do this for the individual components in Java:

HorizontalLayout h = new HorizontalLayout(new Button(new Icon(VaadinIcons.BUG)),
                    new Label("horizontallayout"));
h.getStyle().set("flex-shrink", "0");

Or you can create a CSS class that sets the property for all of the container’s children by adding this to your shared-styles.html:

.scrollable {
	overflow: auto;
}
.scrollable * {
	flex-shrink: 0;
}

Then you can just set this class for the VerticalLayout in Java:

withHorizontalLayout.addClassName("scrollable");

This way it’s really easy to reuse for other layouts.

Sorry for the late response. I hope this is still useful to you.

3

great explanation

Thank you!

4

No problem. :slight_smile:

I actually found a ticket about this flex-shrink issue from our backlog: https://github.com/vaadin/vaadin-ordered-layout-flow/issues/31

I added your usecase in there.