Dynamic width of panel with vertical layoutgroup with buttons

Unity Engine
1

I’m sure this has been asked before, but I couldn’t find it anywhere. I have this:

  • Panel (Content size fitter + vertical layout group)
    – Button (Layout element, but needs to be 100% width, so the entire line is clickable)
    — Text (Can be short or long, if longer than 500, the button shall expand, and also the panel)
    – Button
    — Text
    – [More buttons can be added dynamically]

It expands correctly vertically when adding more buttons.
I want the panel to be at least 500 wide, but expand to be as big as the buttons are, who in turn needs to expand to as big as the biggest text.

Panel:
Vertical layout group: Child Force Expand Width+Height, no other checks
Content size fitter: Horizontal: Preferred size, Vertical: Min size.

Button:
Layout element: No checks at all.

Text:
Horizontal overflow: Overflow

THE PROBLEM:
I can change the width of the buttons, and the panel changes, but the text is overflowing.
How can I let the longest text control the width of all buttons?

964×324 166 KB

PS: The buttons shouldn’t be yellow of course, but just so you can see them. :slight_smile:

2

You might be able to do that with Content Size Fitters on all the buttons (controlling their widths based on the text).

3

Here’s how you can do it:

Panel:

  1. Vertical Layout Group
  • Child Control Size: Width
  • Child Force Expand: Width & Height
  1. Content Size Fitter
  • How you have it
  1. Layout Element
  • Min Width: 500

Button:
Vertical Layout Group (Or horizontal, doesn’t matter since there is only one child object)

  • Child Control Size: Width & Height
  • Child Force Expand: Width & Height
2 Likes
4

@Antistone Yeah that seems like the logical choice, but Unity got angry when I did that and according to the docs, you’re not supposed to have that when the parent also has a content size fitter…

@nickfagan Wow, this works perfectly, like pure black magic! I remember using vertical layout groups on elements with a single child before, but I didn’t remember it was for this purpose. The only issue is if the text in the buttons are super wide, it would be cool to cut them off at a max width, but I remember reading that this isn’t supported.

So I guess I should instead just cut the text at X characters instead if needed. Thanks a lot! I followed you on Twitter (I’m bluegoogames) and checked your website and your assets. I’m glad to see you got some good reviews on the game.

Btw, i’m honored that you’ve posted 4 posts here since 2015, and you helping me is one of them. :slight_smile:

Can say that I’m looking forward to the new UI Builder, which seems a lot easier than the current one.

Thank you again!