How to make UI Panel scale to fit content

Im trying to learn the new UI system.

Heres a simple panel with text as its child (note, the pointer on the topleft is just an image and is not relevent)

I’d like the panel to resize based on the text within in it something like this.


Ive tried adding a layout element to the text and a horizontal layout group and content size fitter to the panel (and a bunch of other combinations) but I always get really weird behaviour (for example the panel growing exponentially bigger than the text).

I’m on the cusp of just getting getting the behaviour I want through code, but I want to give the new UI system a go.

So you need to put a content size fitter and also a layout group (horizontal or vertical, doesnt matter as there is only one child) on the Panel.

But a really important thing that I missed is that you must correctly set the pivot and anchor of the panel and text before you add those components. Any changes you try to make to them after adding those components will be ignored and their positions definitely affects how the text will expand.
Also if your text is scaled you will get weird behaviour (ie. the panel growing exponentially bigger than the text)

did you have a look here?

I guess you could make the image a child of the text -
and then put a “size fitter” component on that text box.

hope that helps,