A styling option to make all children equal width/height in relation to the parent width.

Unity Engine
,
1

I’ve been struggling to find a way to create a row of buttons that are equal width within their parent container.

It seems to be impossible. I tried putting each button inside of a VisualElement, and setting the flow-grow to 1, but the elements just resize depending on the button text.

Ideally, I would like to have a VisualElement that has, let’s say, 5 buttons. This VisualElement would have perhaps a dynamic width (depending on how large the parent width is), and each of the five buttons would have an equal width regardless of the content, where each of the buttons combined widths would equal the width of the parent, so:
child.width = parent.width / child.count
I could easily just do this in C#, but it would be so much more convenient if I could just set a value in the stylesheet and not have to worry about it.

1 Like
2

Flex-box like to treat text like scripture. To fix this, set these styles on your Buttons:

flex-grow: 1;
flex-basis: 0;

flex-basis is set to auto by default which means the ratio for flex is calculated based on the element’s original size, which for your buttons, is partially based on the test length.

3 Likes
3

Wow, thanks. That’s exactly what I was looking for.