Wrapping components inside a HorizontalLayout

I am adding a bunch of Buttons to a HorizontalLayout. I’d like them to “wrap” if the there are more buttons than will fit inside the layout based on the layout’s width (expanding the height of the layout). Nothing I have tried works - the buttons refuse to wrap; instead, they just get clipped once there are too many to display.

What must be done to get components inside a HorizontalLayout to wrap to the next line based on the HorizontalLayout’s width?

Hi,

As the name implies,
HorizontalLayout
lays out the components horizontally. If you want some other configuration, you need to use another layout. In your case, I’d recommend
CssLayout
, which by default will wrap in the manner you describe, and is also quite flexible while remaining very lightweight and fast.

Best Regards,
Marc

One might still want a horizontal layout but with a fixed width that lays components out horizontally until reaching the configured width, at which point components “wrap” around to the next line but I understand now that HorizontalLayout just wasn’t designed to do that, so I appreciate the pointer.

HorizontalLayout hl = new HorizontalLayout();
hl.addStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING);