Horizontal Layout Wrapping?

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


Anything similar in v13?


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]

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

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 is perfect. Thanks!