Limit Max Width of a Layout Component in Unity

Original post of the problem: http://forum.unity3d.com/threads/limit-max-width-of-layout-component.316625/

Demand

A textbox with a child text component. The textbox width would increase with the length of the text up to this maximum value at which point the width would be fixed forcing the text to wrap to the next line now increasing the height of the button.

A common needed of UI. I was surprised that Unity didn’t have max width for their vertical layout component so far… But never mind, using combinations of vertical and horizontal layouts could achieve what we want.

Solution

08/08/17 Update: For newer versions of unity you must check “control child size” on all the layout groups. (Thanks to Andrew McClain!)

Here’s a gif provided by Stephan B which solved the problem elegantly (Click to see full-size):

062016_limitmaxwidthoflayoutcomponent_gif

In conclusion:

  1. Root – Anchor(Width Control)
    • Rect Transform: the width of the RectTransform of this serves as the width limit (max width)
    • Content Size Fitter: Horizontal  Fit = Unconstrained;Vertical Fit = Preferred Size
    • Horizontal Layout Group: Child Force Expand =unchecked
  2. Child – Background:
    • Rect Transform
    • Image: the background (or frame) you may want to use
    • Vertical Layout Group: Child Force Expand = unchecked
  3. Leaf – Text, or other UI contents.
    • Text: Horizontal Overflow = Wrap; Vertical Overflow = Overflow
    • RectTransform of each Text(Game Object) will extend horizontally according to the length of the text automatically. However, if the length exceeds the width limit, which is RecTransform’s width of the RootAnchor, it will wrap to a new line automatically;
    • Each Text/content should be a child. The background/frame will extent vertically automatically when adding more contents.
    • Each Content could also be a group of horizontal layout

10 Responses

  1. Realy Thanks, dont know how many time i spent to configure how to make this. But this helped a lot. Many many thanks to you!

  2. Okay i just did it!
    I dont know where the problem was.. 😀
    Thank you very much for this tutorial!!! Have a nice day!

Leave a Reply