Horizontal Layout Wrapping?

Flow
1

It looks like there used to be a CSS tweak (in the Valo theme) to allow Horizontal Layout to wrap items.

https://vaadin.com/forum/thread/1588691/wrapping-components-inside-a-horizontallayout

Anything similar in v13?

Cheers,
-Will

2

Just like in Vaadin 8 they suggested to use CssLayout, in Vaadin Flow you would use Div for that.

If I recall correctly, there is no longer the option to ‘misuse’ the HorizontalLayout like that with a simple method. However, you can always add your own styles to achieve this. I’m no CSS god so I can’t give you working CSS to apply. But as far as I know, in Flow the HorizontalLayout is using Flex, where wrapping is [certainly possible]
(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items).

Just use a Div, is my recommendation. :wink:

3

You can also use FlexLayout, which gives you a server-side API for setting the wrap mode. Example:

        FlexLayout flexLayout = new FlexLayout();
        for (int i = 0; i < 100; i++) {
            flexLayout.add(new Span("Span " + i));
        }
        flexLayout.setWrapMode(FlexLayout.WrapMode.WRAP);
4

FlexLayout is perfect. Thanks!