Buttons are drawing outside HorizontaLayout

Hi,
I have problem with drawing buttons inside horizontal Layout. When i’m changing page size then they are starting to draw outside layout. I tried to add them to Div instead HorizontalLayout and i liked how it started to work. When buttons were fitting in line then they were drawing in one line inside div but when they couldn’t fit then they were drawn in the next line but my problem was that there was no spacing,padding bettween them and i can’t set it. And when i was changing font-size inside button it was’t changing size only font was resized.
Is there any option to draw my buttons inside HorizontalLayout like in this Div,or any other option to make it work?

Horizontal Layout:

Green layout is my Horizontal Layout where i’m adding buttons and textfield, then i’m adding green layout into red vertical layout.

!)
!)
!)

Div:

Yellow layout is my Div where i’m adding buttons and textfield, then i’m adding yellow layout into red vertical layout.

!)
!)
!)

Hi Miłosz,

So what you’re looking for is a way to make HorizontalLayout wrap its contents when it runs out of space.

There are basically 3 options for this:

  1. HorizontalLayout has no API for this, but you can make it wrap by applying flex-wrap: wrap; css property to the layout. Unfortunately this does not work very well together with spacing, as the first item on the second line will get unwanted spacing to the left, and there isn’t really any way around that that I’m aware of.

  2. You can use FlexLayout instead, which has a setFlexWrap method that enables wrapping. Unfortunately it doesn’t have a spacing feature. You can add spacing to it with css, e.g. if your FlexLayout has the classname wrapping-layout:

.wrapping-layout > * {
  margin-right: var(--lumo-space-m);
}

While this does have the same problem as option 1, in that it gives you some extra unwanted spacing, in this case that ends up to the right of the last item on the first line, which may be somewhat less annoying.

  1. You can use that div of yours instead, and do the same thing as with FlexLayout to apply spacing.

The problem is that the flexbox model in css doesn’t have a (broadly supported) way to provide spacing between items that works well together with wrapping. (There is one coming, but it doesn’t work in IE, older Edge versions, or Safari.)

Thanks for help flex-warp for Horizontall worked prefectly