HorizontalLayout wrapping

How to make elements in a HorizontalLayout wrap, so go to next line instead of scrollable?

Hi @dazzling-alpaca,

That would defeat the purpose of using a HorizontalLayout in the first place. A FlexLayout would be a better fit for your case.

Then you can set flexWrap to it like:

var flexLayout = new FlexLayout();
flexLayout.setFlexWrap(FlexLayout.FlexWrap.WRAP);

thank you that worked but the buttons inside have no margin now.

do you have any idea how to add margin please?

Hey. Sorry about the delay. Went afk for a while. You can use justify content for that:

flexLayout.setJustifyContentMode(JustifyContentMode.BETWEEN);

You can check the api for other useful methods here: https://vaadin.com/api/platform/24.0.0/com/vaadin/flow/component/orderedlayout/FlexLayout.html

Horizontal, Vertical, Form layout and others are pre-configured for you with sensible defaults, so to speak. FlexLayout doesn’t come with anything pre-configured by default so you need to call some of those methods (or style the layout with css through the Element api manually).

You can add the Lumo CSS Utility Gap class to your FlexLayout and are good to go.

You can actually make a HL wrap just fine with CSS: flex-wrap:wrap

(pre-V22ish versions had some issues with that, but those are gone in recent versions)

Thanks all for the help

How this would be done? with a class on the style sheet?

The getStyle() method in Flow lets you set inline styles on elements, so that’s one way:
layout.getStyle().set("flex-wrap", "wrap");
Or you can use the utility classes (https://vaadin.com/docs/latest/styling/lumo/utility-classes):
layout.addClassName(LumoUtility.FlexWrap.WRAP);

Thanks Rolf, i tested with getStyle and it works, but with addClassName it does not wrap

hmm, perhaps you need to enable the utility classes in your theme config first: https://vaadin.com/docs/latest/styling/lumo/utility-classes#enable-utility-classes

oh, I just realized we’re having the same discusion in two different threads :grin: