UI Nested Vertical Layout Groups

Question

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.

alt text

Answer 1

Best Answer

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.

Add comment · Show 2 · Share

OrthrusOliver · Nov 26, 2018 at 05:55 PM 0

Share

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

MialeeMialee · May 13, 2020 at 02:16 AM 0

Share

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 2

Answer by MikkoHaapoja · Feb 28, 2017 at 10:23 PM

alt text To get this to work I had to put the top level container to Control Child Size

screen-shot-2017-02-28-at-34326-pm.png (72.4 kB)

Add comment · Show 4 · Share

ConflictedDev · May 24, 2017 at 05:45 AM 0

Share

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.

FoodLover195 · Sep 09, 2018 at 08:14 AM 0

Share

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.

electric_jesus · Aug 26, 2019 at 02:10 PM 0

Share

Thank you so much!

wurzer · Aug 23, 2021 at 06:55 AM 0

Share

It is simple and the best solution

Answer 3

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.

alt text

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:

alt text

screenshot-2016-06-13-152134.jpg (41.9 kB)

screenshot-2016-06-13-151215.jpg (19.7 kB)

Add comment · Show 2 · Share

ThePersister · Jan 12, 2017 at 03:13 PM 0

Share

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: Preview image of the list

previewofsaidlist.png (25.3 kB)

ratneshpatel · Jun 08, 2019 at 06:48 AM 0

Share

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 4

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?

Add comment · Show 1 · Share

ThePersister · Jul 05, 2017 at 09:59 PM 0

Share

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 5

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.

Add comment · Share

UI Nested Vertical Layout Groups

6 Replies

Your answer

Follow this Question

Related Questions