- Home /
I don't understand "Child Force Expand" on uGUI
I wanted the area to split into 2 areas, the condition is lower area must be 200 unit tall then any available space is allocated to top area.
So in Panel
I used Vertical Layout Group with Child Force Expand Height unchecked. So I can choose how much space will the child take.
Then in Panel1
there is Layout Element with Flexible Height of 1 so it will attempts to fill as much as possible and then in Panel2
I put in Layout Element also but with Min Height of 200. This produce exactly what I wanted.
Now the problem is I wanted the Panel2
to be a Horizontal Layout Group too. I wanted all children in this Horizontal Layout Group to completely fill up the vertical space that Panel2
has so I leave Child Force Expand Vertical checked.
Now the unexpected behaviour is these children push Panel2
up to some space which I think is half vertical space PLUS 200 which is Min Height. This does not make sense to me. Why did it 'expand' to that size? Can someone explain why this is happening (Changing Layout Element of Panel2
from Min Height to Preferred Height since I 'prefer' that size does not help, same result.) and how to make it fit the size parent has instead? Thank you.
I have no idea how to fix your problem, but thanks for the question! I didn't understand Child Force Expand at all, and your example showed me how to do some useful things.
Answer by hubatish · Aug 15, 2015 at 09:19 PM
I'm guessing you already found a workaround, but I just got this working. Thanks for the quick explanation of Flexible Width/Height; I'd never been able to use that and Vertical Layout Groups before!
The trick to having the children not expand or go outside the preferred heights bound of the parent was to put the Horizontal Layout Group on a child of the Layout Element with Preferred Height: 100. This doesn't make a ton of sense, but it seems to be working.
In the example above, VerticalGroup has a Vertical Layout Group with Child Force Expand: Width. PanelHFlexible has a Layout Element with Flexible Height: 1, and PanelHPreferred has Layout Elements with Preferred Height: 100. Then HorizontalGroup - the child of PanelHPreferred - has a Horizontal Layout Group with Child Force Expand Height. Finally Child1 and Child2 have Flexible Width 1.
Hopefully this example works for you as well!
just tried your soulution, and it didn't work, used unity 2017.1.0p5.
I moved value(100) from "$$anonymous$$imum height" to "preferred heigh" in bottom panel, then if I set either "child force expand - height" in bottom panel or "flexible height = 1" in child elements - bottom panel becomes taller, completely ignoring self "preferred height" setting
Answer by apelsinex · Sep 08, 2017 at 10:51 AM
Here's solution that worked for me, unity version 2017.1.0.p5
For holder panel: "child controls size" - both checked, "child force expand" both unchecked Got top panel: "flexible width" and "flexible height" = 1 For bottom panel: "preferrd height" = 100, "flexible width" = 1, "child controls size" both checked and "child force expand" both unchecked. In nested elements in bottom panel: "preferred height" to any big value (like 100000) and leave "flexible height" unchecked - thats main thing, width set controlled by "flexible width" = 1
Your answer
![](https://koobas.hobune.stream/wayback/20220613193246im_/https://answers.unity.com/themes/thub/images/avi.jpg)