Fitting a parent UI element to a Child Text's Content

Question

As the attachment illustrates I have an Image element to function as the panel behind its child Text element whose content dynamically changes at runtime, and want to make the parent adjust size to fit.

I've tried adding a Content Size Fitter and Layout Element to both the parent and child, and fiddled with both their vertically-oriented parameters. What's the magic combination? [1]: /storage/temp/65382-ui-size-fitting.png

Answer 1

Best Answer

Answer by blitzen · Mar 07, 2016 at 04:08 PM

A little more fiddling yielded fruit. For posterity, the combination that worked was:

No special components on the text child.
A Content Size Fitter on the parent with Horizontal Fit at "Unconstrained", Vertical Fit "Preferred Size".
A Vertical Layout Group on the parent (according the docs it would be just as well for a Horizontal given only one child), with proper padding and Child Alignment to "Middle Center".
To keep it at the top-left corner, set the parent's "Pivot" to (0,1).

Add comment · Show 3 · Share

Harinezumi · Aug 09, 2018 at 08:02 AM 1

Share

This doesn't seem to work for me (at least in Unity 2017.3.1).
What I did was:
- add ContentSizeFitter to parent of Text, Horizontal Fit to "Unconstrained" (I also tried "Preferred"), Vertical Fit to "Preferred Size"
- add VerticalLayoutGroup to parent of Text, set up preferred padding (20, 20, 5, 5), and Child Alignment to "$$anonymous$$iddle Center"
- pivot point of parent at (0.5, 0)
The result is that the parent only has a size according to the padding, it ignores the space required for the text.

On the other hand, setting from code the sizeDelta of the parent RectTransform of the Text to preferred size works:

 textComponent.text = ...; // set the text to something new
 RectTransform parentRect = ...; // somehow get the parent RectTransform
 parentRect.sizeDelta = new Vector2(textComponent.preferredWidth, textComponent.preferredHeight) + padding; // padding is a Vector2 width the padding you want to add around the text, in pixels

cissi- · Jul 20, 2020 at 06:53 PM 3

Share

I had trouble with this in 2019.1.2 until I made sure that I had "control child size" set to true for both with and height. I also needed to have Both horizontal and vertical fit to "Preferred Size". "Unconstrained" did not work.

I.e.

No Layout -Components on child.
Content Size Fitter on parent. With Horizontal Fit: Preferred Size and Vertical Fit: Preferred Size
Vertical Layout Group on parent (Didn't try Horizontal, probably would have worked too), with Control Child Size: width - true, height - true Child alignment: $$anonymous$$iddle Center Padding and Spacing didn't matter. Use Child Size didn't matter. Child Force Expand didn't matter.
Pivot to (0,1) on parent to keep text expanding from top left

MaxLohMusic · Jan 30 at 03:45 AM 0

Share

Worked like a charm; just remember to also specify control child width/height

Answer 2

Answer by slalom_ · Apr 07, 2020 at 07:55 PM

If you don't mind using two canvases, here's one way to do it:

 Canvas
     Text (ContentSizeFitter, prefer veritcal/horizontal)
         Canvas (stretch width and height, override sorting to render behind Text)
             Parent (stretch)

Add comment · Show 2 · Share

IMD · Aug 26, 2020 at 10:12 AM 0

Share

Hi @slalom_ Thanks for the idea... I'm just wondering if you could explain the last line 'Parent (stretch)'? I've been unable to find a solution for text expanding and making it's parent expand also. In my case I have a button whose text is updated from a database. If the text is more than a few lines I'd love the button to expand vertically with the child text. $$anonymous$$any thanks for any comments on this.

slalom_ · Oct 28, 2021 at 02:36 PM 0

Share

Hi @IMD, by "stretch" I refer to the anchor presets. I hope that helps!

Fitting a parent UI element to a Child Text's Content

2 Replies

Your answer

Follow this Question

Related Questions