I’m trying to nest vertical layout groups as shown in the image below. I want both the internal groups and the external group to expand based on their content. To do this, I’m using a “Content Size Fitter” on each group. This approach works perfectly for the internal nested groups, but not for the external group. Instead, the external group expands, but only slightly, resulting in the internal groups overlapping when their content grows.
Is there another way to approach this that I’m missing?
Thanks in advance for your help.
NOTE: Running Unity 5.3., for PC standalone build.
@campbal: I found this post while looking into a similar issue. I experimented and asked a few pointed questions to people in the know…
Turns out the solution that has no warnings is a content size fitter on the “Content” panel only, and then layout elements or vertical layout groups on the rest of the elements.
This is the test set-up I used for this issue, as I wanted to push the envelope and use a header and sub-panel inside the original vertical layout group.
The Content panel has Vertical Layout Group and a Content Size Fitter.
The Meal Panel has a Vertical Layout Group.
The Header Panel has a Layout Element to protect its size.
The Meal Content Panel has a Vertical Layout Group.
The Items all have a Layout Element to protect their size.
After playing around with it for a couple of days, I was able to get it working on my own. Here is the structure that worked for me:
External panel to contain sub panels has a “Vertical Layout Group” and a “Content Size Fitter”. The “Content Size Fitter” Horizontal Fit is set to “Unconstrained” and the Vertical Fit set to “Preferred Size”.
Each of the sub panels (blue in the illustration above) also has a “Vertical Layout Group” and a “Content Size Fitter” with the same settings.
I then have “Layout Element” components attached to the objects that are in the sub panels. Primarily for the “Preferred Height”.
This set up is working without any problems for me, even though I get an error in the “Content Size Fitter” component telling me that a child of a layout group should not have a content size fitter. A quick search shows other people getting this error also.
I have a problem with this… My set up is the same as your, I have a parent container with a Vertical Layout Group attached to and a Content Size Fitter. The same for three children I have which are bound to be the sub-list.
I insert several item at runtime. However, they often (not always) overlap: the father container doesn’t arrange the children list when they change their container… This happens only on my mobile, in the editor is fine.
I think the container’s size is calculated before I insert some items inside its children. Is there a method I can call to re-check the size it should take?
Just have to add, I had the overlapping problem and discovered that the scale of each child object was slightly off. 1.2 instead of 1 - caused each object to overlap.
To get this to work I had to put the top level container to 
