Horizontal layout should not grow to take up the whole container

The documentation explains that HorizontalLayout takes up as much space as necessary to fit all its children. However, in the example right below that it is clearly shown that the layout instead grows to 100% width of its container. Is this a mistake in the documentation or am I misunderstanding it?

How can I configure the layout to not grow like this?

I am using HorizontalLayout to add two buttons to a single column of a Grid. I also use setAutoWidth(true). However, the layout is unnecessarily wide and the auto-width makes the column unnecessarily wide.

Not saying this is the best way to do it, but have you tried:

layout.getStyle().set("width", "auto");

So you already know the culprit: auto-width. If you always add the same buttons; define the width for that column yourself and you are good to go. This should also increase the performance of the Grid.

I found a solution that works for me:

.setAutoWidth(true).setFlexGrow(0)

This way the initial width is set correctly to accommodate the content but does not grow further thus giving that saved space to all the other columns.

Thank you!

1 Like

For future reference; HorizontalLayout is display: flex by default. You can change this by using the utility classes for instance.

layout.addClassNames(LumoUtility.Display.INLINE_FLEX);

To clarify further, when you place a HorizontalLayout within a flex container with flex-direction: column, the HorizontalLayout will, by default, stretch to fill the full width of the parent container.

However, if you set the parent container’s align-items property to start, it will align the children to the start of the cross axis (vertically, in this case), and the HorizontalLayout will only take up the space required by its content, rather than stretching to fill the full width.