- Home /
UI Nested Vertical Layout Groups
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.
Answer by campbal · Mar 23, 2016 at 03:41 PM
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.
The far superior answer is the one posted below by Adam-Buckner with the added caveat that the various layout groups should have children drive the size. http://answers.unity.com/answers/1202057/view.html
A "Content Size Fitter" on all nested vertical layout groups seems necessary and as you point out the warning should be irrelevant. I do not think the other answer by Adam-Buckner should work
Answer by MikkoHaapoja · Feb 28, 2017 at 10:23 PM
To get this to work I had to put the top level container to
Control Child Size
Thanks for mentioning this, by far the simplest solution. I ran into this issue while strea$$anonymous$$g a basic dev series with the use of built-in Unity UI and this seems to resolve it.
Thanks a ton :D Just to note, in my case I had several layers of nested layout groups. You need to tick that height box for all layout groups, expect the lowest nested one to keep all of them scaling with their child.
Answer by Adam-Buckner · Jun 13, 2016 at 02:24 PM
@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.
This seems to work as desired:
Thank you so much for this addition! It took me a bunch of fiddling around, but I applied your structure, modified it and managed to create a similar system, upgraded with a multi-segment header and an offset / indent for the interactive list below it! :)
Without revealing too much of what I'm doing:
Hi Adam-Buckner, Can you tell us what are the parameters set for all the Vertical Group components and the Content size fitter component?
Answer by Andrea_Marchetti · Jul 04, 2017 at 01:34 PM
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?
Hi there Andrea, you could try LayoutRebuilder.ForceRebuildLayoutImmediate(yourRectTransform); works on mobile too, best of luck! : https://docs.unity3d.com/ScriptReference/UI.LayoutRebuilder.ForceRebuildLayoutImmediate.html
Answer by Romano · Jan 16, 2018 at 09:28 PM
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.
Your answer
![](https://koobas.hobune.stream/wayback/20220612072735im_/https://answers.unity.com/themes/thub/images/avi.jpg)
Follow this Question
Related Questions
two layout elements on one Vertical layout group line 0 Answers
Trouble creating a horizontal group for Tall and Wide screen orientation! 0 Answers
Need some help regarding UI layout in different Screen resolutions 1 Answer
Unity UI - layout fixed number of buttons 1 Answer
How to save panel size in a layout? 1 Answer