Text self-adapting

Fit to size of UI element with child Text

If you had a UI element, such as a Button, that had a background image and a child Game Object with a Text component on I T, you probably want the whole UI element to fit the size of the text-maybe with some padding.

In order to does this, first add a horizontal the Layout Group to the UI element and then add a Content Size Fitter too. Set The horizontal fit, the Vertical fit, ot both to the Preferred setting. You can add and tweak padding using the "Padding property" in the horizontal Layout Group.

Why use a horizontal Layout Group? Well, it could has been a Vertical Layout Group as Well-as long as there is only a single child, they produce the same Result.

How does does it work?

The horizontal (or Vertical) layout Group functions both as a layout Controller and as a layout Element. First it listens to the layout information provided by the children of the group-in this case, the child Text. Then it determines how large the group must is (at minimum, and preferrably) on order to being able to contain all the CHILDR En, and it functions as a Layout Element that provides this information is about its minimum and preferred size.

The Content Size Fitter listens to layout information provided by any layout Element on the same Game object-in this CAs E provided by the horizontal (or Vertical) Layout Group. Depending on their settings, it then controls the size of the Rect Transform based on this information.

Once the size of the Rect Transform have been set, the horizontal (or Vertical) Layout Group makes sure to position and siz e its children according to the available space. See the page about the horizontal Layout Group For more information about what it controls the positions and sizes of its C Hildren.

Text self-adapting