How to make buttons resize to their child text while auto aligning inside a panel?

Unity Engine
,
1

Here is what I want to do but cannot figure out how to do:

  • Have a set of buttons automatically align to the middle left side of a panel with a little spacing between them.
  • Have the buttons size themself automatically to the size of the Buttons Text child.

I can figure out how to either 1 or 2 but not both at the same time.

My UI setup is:

  • Canvas
    ---- Panel
    -------- Button 1
    -------- Button 2
    …
    -------- Button N

Im following the guidelines in the this reference page:
https://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html

  • To solve 2. I attach a Horizontal Layout Group + a Content Size fitter to the Buttons It works like a charm.
  • To solve 1 I add a Horizontal Layout Group to the panel. This in itself works as expected.

However, when I try combine the 2 it does not work. According to the reference page you cannot put a Content Size Fitter on a GameObject (the Buttons) that is the child of a Layout Group (on the Panel).

So any advice on how to make this work? Please be as specific as possible as I am new to Unity. For example what Layout Groups / Fitters / Elements /… do I need to add to each GameObject and how should I set each of their settings?

I have looked at this post but cannot make it work in my context:

Any help is really appreciated.

Kind regards
Flemming

3 Likes
2

I feel kind of stupid. Have been looking at the problem for 2 nights and after writing my question here I found the answer almost right away…

I had to put the Content Fitter on the panel:

  • Panel ← Horizontal Layout Group (Child controls Size width check, rest unchecked) + Content Size Fitter (Horizontal Fit = preferred size).
    ----- Buttons <— Horizontal Layout Group (Child controls size width checked)

Now the buttons will resize according their text child. The panel will also resize to wrap tightly around the buttons.If I set the panel piviot X = 0.0 it would resize but keep the left edge in place.

I didnt want the panel to resize so I added an empty GameObject inbetween the Panel and the Buttons:

  • Panel
    ---- GameObject ← Moved the panel Layout Group and content size fitter here.
    --------- Buttons

Now the GameObject will resize and the panel will stay the same size.

/Flemming

23 Likes
3

Does this work for you at runtime? For me it works fine in editor but not after pressing play. I’ve tried doing LayoutRebuilder.ForceRebuildLayoutImmediate(triedBothButtonsAndPanelHere); as well, doesn’t seem to work for me.

Edit - never mind, it was a conflict with another script I had which set the button’s image in the awake method. I have it choose randomly between 4 button images so there’s a bit of personality - I had this re-rolling every time the menu popped up, had turned that off for debugging, but even setting the image in Awake was affecting this. Works fine with that script disabled, so now I just have to figure out a way around that.

Edit 2 - for anyone else having the same issue, the fix was easier than I thought. In my other script that is responsible for randomizing the image used for the button, just need to store the size of the rectTransform before swapping out the image, then set the new size to that stored size after the swap. I’m wondering if maybe unity’s default is to “set native size” when swapping in a different image, which would explain why this wasn’t working for me before. Relevant code:

Vector3 originalDelta = imageToSwap.rectTransform.sizeDelta; 
//get the original Image's rectTransform's size delta and store it in a Vector called originalDelta

imageToSwap.sprite = newSprite; //swap out the new image

imageToSwap.rectTransform.sizeDelta = originalDelta; //size it as the old one was.
4

Just enable “Best Fit” property of text component of a Button . And provide minimum and maximum font size that you want your text should take. It will automatically adjusts text size.

1 Like
5

That’s not the same thing though. He’s asking to resize the button based on the text, not the other way around.

6

Thank you!

7

Thanks man

8

Thank you Nordar.

If anyone is wondering, in current editor versions “Child Control Size” was renamed to “Control Child Size”.

1 Like
9

It works fine in editor , but at run time it’s spawns weirdly ,even on clean project , so what i come to:

  • Canvas
  • Panel <—new one empty scale it as you prefer
    ---- Panel <—Set pivot with shift button to (blue dot) to left-top , and switch to Preferred size
    -------- Button 1
    Very simple but any way