- Home /
Fitting a parent UI element to a Child Text's Content
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 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).
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
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
Worked like a charm; just remember to also specify control child width/height
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)
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.
Hi @IMD, by "stretch" I refer to the anchor presets. I hope that helps!
Your answer
Follow this Question
Related Questions
Instantiated UI objects with image components not appearing, rest of object works fine. 0 Answers
How to match UI Image size to UI Text size when using ContentSizeFitter on UI Text? 1 Answer
UI components all disappear on Play mode, then stay invisible 2 Answers
Display Emojis using its HTML code in a text 1 Answer
add and remove matches 0 Answers