Is there a way to set a Maximum width on a layout component? This would be useful to control how wide a given element can be to force word wrapping on text for instance.
Example: Imagine a button with a child text component. The button 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.
In the same line, it would be nice to also be able to set a maximum value on the height.
The Layout Element Component would seem to be the ideal candidate for this feature where in addition to min values, max values could be defined.
I have to admit that I was a bit baffled that a max value didn’t exist on the Layout Element component. It seems that Preferred seems to sort of work that way, but then - not really.
I still can’t achieve the result that I seek using what you described. When using preferred width / height it does limit (max) the property but it also forces this as a minimum.
For example assume you have a container for text that you wish to have a min height of 50 (assume 1 line of text) and max height of 150 (3 lines of text). So when the text is 1 line, the container is of height 50. When the text is 2 lines, the container is 100 and then when the text is 3 lines it is 150. When the text is 4 lines, the 4th line is truncated since the max height is 150. When using preferred height as you describe, the text container is always the preferred height and doesn’t shrink in height based on the number of lines of text supplied.
The parent of this text container has a ContentSizeFitter to make sure the height changes based on the lines of text. When using preferred height, the ContentSizeFitter simply uses that instead of the number of lines of text.
Hi, I’m just back from vacation, hence the late reply.
After pondering the described use case for a bit, I don’t think the layout system handles it well. I think OnGUI / IMGUI which it was inspired by also doesn’t handle it well. (IMGUI has a MaxWidth property, but it’s implemented very similar to the PreferredWidth in the new UI system - i.e if you specify a MaxWidth and there is sufficient space, it will be used.)
To have support for a max-width that works in the way described in your post above, the layout calculations would have to be quite significantly different (and more sophisticated). I’ll add it to our list of usability concerns.
At this point it’s not clear how many people are having major problems due to this. The UI Team is spread quite thin at the moment (I’m technically not on it myself anymore either), and while we’re looking to expand it, this feature request is likely not going to be the first thing worked on. As usual, it can help us get a better overview of demand if you create an item for it on our feedback site and vote on it there.
For anyone who might want to look into modifying the UI source code to add support for this, the relevant places to look are ILayoutElement.cs, LayoutUtility.cs, LayoutElement.cs, and HorizontalOrVerticalLayoutGroup.cs.
Thank you for the reply and hope you had a great vacation.
I’ll look into the source code although modifying it for personal / project use is fine but in the context of releasing an Asset through the Unity Asset Store trickier to handle.
I am running into this same issue, it is a real hindrance to the layout system when you are working with text controls that contain a lot of text. Really need max values support on LayoutElement.
I found a way that works for me. See if you can adapt it to your needs.
I was working on a tool tip, so I have an image with text inside it. The tool tip should resize the width to fit the text, but have a max width, after which it will wrap and expand horizontally. To make it work, I added an empty object with a layout element with a preferred sized (the max width). I’ve attached an image to explain it in detail.
empty object
Rect Transform
Layout Element: preferred width = 120
Content Size Fitter: Vertical Fit = Preferred Size
Vertical Layout Group: Child Force Expand = none checked
Image
Rect Transform
Image
Vertical Layout Group: Child Force Expand = Height checked
Using a similar setup with an Empty object as the top parent, I was able to get the desired result without the need to add a Layout Element on the top parent. Instead, the width of the RectTransform of this top parent serves as the width limit.
As you can see in the video, the image (button in this case) will expand up to the width of the parent and the text will wrap as expected. Note that I am using TextMesh Pro here but the behavior is the same when using UI.Text.
Credit for the idea goes to one of my TextMesh Pro users and @kweinhold who had very similar setups. I just figured out that it could be done without the extra layout element.
