Why doesn’t Layout Element have Max Width and Max Height? Without this, as far as I can tell, it is impossible to do a shrink-to-fit text box which wraps text (and expands the height) when a maximum width is met.
ContentSizeFitter? Unity - Manual: Content Size Fitter
1 Like
The preferred width and height function this way as long as the flexible width and height are zero.
2 Likes
Then why isn’t this box shrinking to fit the text? It is always expanded to the maximum width of the layout group’s bounds, even if there isn’t enough text to require that much width.
Edit:
The only way I’ve found to fix the issue is to also put my dialogue box (with its own layout group) inside another object with a horizontal layout group, then set it’s flexible width to 0 and add two layout elements on each side with flexible widths of 100 (using 1 doesn’t “squeeze” it hard enough). Having an explicit maximum width for layout elements would eliminate the need for these extra flexible elements, as it would prevent the text box’s width from expanding beyond that value, while also still allowing it to automatically shrink to fit the text.
Edit 2:
Essentially, I guess the real problem is that there’s no way to explicitly limit the “Preferred Width” of a text box - as far as I can tell (you can set it, but not limit it). A text box will just expand its preferred width indefinitely unless it is limited to a parent layout group’s width, in which case the text will not shrink to a smaller preferred width than the width of the layout group (thus preventing a shrink-to-fit behavior).
2 Likes
It’s the parent you want to resize to fit the child? You didn’t say so before, but no problem!
Just add a HortizontalLayoutGroup and a ContentSizeFitter to the parent. (The layout group should have force expand child width and height disabled.) For more info, see here: http://docs.unity3d.com/460/Documentation/Manual/HOWTO-UIFitContentSize.html
2 Likes
Maybe I missed something, but that doesn’t seem to work either.
If I have force-expand width disabled, while the ContentSizeFitter is Preferred Width, it does shrink to fit, but it also expands beyond my desired maximum width of 500. Shown in these screenshots:
If I change the ContentSizeFitter to Unconstrained, and set the rect’s width to 500, the text will shrink to fit, but the border will not. Shown here:
Ok, I misunderstood what you wanted.
I think what you want is then:
ButtonContainer object with
- HorizontalLayoutGroup with ChildForceExpand off
- ContentSizeFitter with horizontal unconstrained and vertical set to preferred
- Set the width of it to the max width you want
- Nothing visual on it
Button (as child of ButtonContainer) with
- HorizontalLayoutGroup with ChildForceExpand off
- Background image for button
Text (as child of button) with
- Text for button
The idea here is that the ButtonContainer HorizontalLayoutGroup will size the Button width according to its preferred width, but not make it larger than the whole group width (unless the Button min width is larger, but by default is 0).
3 Likes
Ah, excellent - thank you. - I was actually just about to post that I had basically done just that. Screenshots attached, in case you or others are curious how I set it up. Edit: Layout Handler inherits the parent’s width (500), which is just for the sake of convenience (no digging into the prefab’s hierarchy).
3 Likes
Hello everybody.
This solution works perfectly with a single element but not in the following more complicated case.
So I have a dynamic scrollable list with some elements.
Each element behaves like ButtonContainer and so it must shrink to the text width but does not exceed a maximum width (so that the text wraps).
Here the hierarchy :
¤ ScrollView object (ScrollRect, Mask, Image)
- ScrollRect
- Mask
- Image
¤ Content object (as child of ScrollView)
- HorizontalLayoutGroup with ChildForceExpand off
- ContentSizeFitter with horizontal set to preferred and vertical unconstrained
¤ Several ButtonContainer (like yours) as child of Content.
But in this case it does not work anymore. Because of constraints introduced by the HorizontalLayoutGroup on the Content object, I can’t set the max width of a ButtonContainer. I tried unsuccessfully to add a LayoutElement (preferredheight sets to my max width and flexiblewidth sets to 0) on ButtonContainer (this one will be aways the max width…)
If anyone has a solution, I will be grateful.
If it helps, I found that LayoutGroup itself acts like LayoutElement (you can see it if you open class hierarchy - LayoutGroup implements ILayoutElement). So, if you want to add LayoutElement and be sure it works as expected, create extra child object and move LayoutGroup to this child. This looks like nor bug nor undesired behaviuor.
That really work perfectly!
This conversation is unbelievable.
Wouldn’t it be much better to have Max width and height on the Layout Element?
We’re limited to not using Child Expand, in the case we can make it work. After hours, I still didn’t.
13 Likes
I agree, I had the same problem today but the above solutions did not work for me - too many layouts in the mix. UI in unity is nice but it easily breaks down when you combine too many layouts and content fitters together… Max width on the layout element would probably solve many problems and avoid extra complexity.
5 Likes
I tried this technique in an a blank scene and it worked out ok. Max width in would be nice to have in Layout Element component though, without this technique it’s a bit confusing.
2 Likes
Aaaaargh! Please, Unity, please add MaxWidth/Height to the layoutElement! I get this:
It does not seem to care that I have a PreferredHeight set for anything:
I’m gonna have nightmares if I can even sleep at all!
I’m sure someone will come up with an easier way to add Min/Max.
kissUI has something similar.
ex:
1 Like
You have Child Force Expand enabled. Please try to uncheck it on all LayoutGroups and see if not that helps.
If either width, height, or both of “Child Force Expand” is not enabled, then the whole UI mashes together into 1 very thin line, even when preferred width/height are set, and the fixed width/height are set to 0 sometimes. I had to create a custom script just to handle this.
I have not seen this myself and can’t reproduce it here. What do you have at the top level? Layout elements will expand to their preferred width unless parent groups force them to be smaller. This might happen if you have a ContentSizeFitter that’s set to size things to minimum width (which might well be 0) rather than preferred width. But otherwise I don’t know why it would happen and would need more details (like a project folder or detailed video) to be able to tell what’s going on.
This is already fixed by recreating everything again. I thought it might be worth to say that this can happen, just that I don’t know much about it.
In the image, I had to drag-select the text and move my mouse downwards in order to highlight all of the text that aren’t shown.
