Expand panel to height of children (which also expand to height of their children)

Getting Started
1

Hello,

So I’m relatively new to unity and this I believe should be a simple task. I have a panel (let’s call it “container”) which has 3 child panels. The child panels should be listed vertically from top to bottom. The first panel is fixed height, the second and third are variable height. The last two panels expand depending on the height of their child objects. The container should also expand depending on the size of the child panels.

8141828--1057037--upload_2022-5-19_17-11-42.png
Based on what I’ve been looking at, it seems I’ll need some combination of Content Fitter and layout components such as Vertical Layout Group or Layout Element. Here is what I would expect to be the set up that would work:

-Container (Vertical Layout Group (Control Child Size: width), Content Size Fitter (Vertical Fit: Preferred Size))
   -First Panel (no particular settings other than fixed height)
   -Second Panel (Content Size Fitter (Vertical Fit: Preferred Size))
   -Third Panel (Content Size Fitter (Vertical Fit: Preferred Size))

However the child panels don’t seem to respond to the Content Size Fitter components attached, and I get warnings that the parent has a layout group component, and therefore I should not be using a Content Size Fitter on the child components.

Is there something obvious that I’m missing here, or is this type of sizing something that is better handled via code? Any help is appreciated!

2

So, first of all, your container:
Updates height using children size? Nothing easier, just add a content size fitter and set the vertical_fit to prefered size.
Listing the children? Add a vertical layout group, and play around with the values until you have something you like.

The children =>

  • First panel: As you want it’s height to be static, you can just add a LayoutElement and set the prefered size to whatever you like. It will force the VerticalLayoutGroup to set your panel’s height to it’s prefered height.
  • Second & third panels: A bit trickier here :stuck_out_tongue: The error comes from the fact that, as you have a vertical layout group as parent, the layout group should control the size of it’s children, and not the opposite. BUT you can change that! If you attach a LayoutElement to your panels, and set their prefered height to true, and then add your ContentSizeFitter with vertical fit to prefered height, then it should fit the size of their children.

Sorry if that does not work, I’m on phone so I can’t test it, but I’ll make sure to correct my post tomorrow when I will be on pc :slight_smile:

2 Likes
3

Thanks for the response! So it looks like after attaching layout elements to the child panels, I was able to get it working, but only after manually calling a function to force the layout to rebuild for all of the panels in the hierarchy. It seems like one shouldn’t have to do this (feels rigged), but after hours of research it seems that this is a fairly common problem that tends to be solved by doing that. This post was helpful in creating a generic recursive function that dives into all child components and calls the function to rebuild all the layouts recursively: Content size fitter refresh problem - #18 by look001 . I modified the functions posted there and added them to a generic library so I can call the method when the container panel is being displayed.

public static void RefreshContentFitters(RectTransform transform)
    {
        RefreshContentFitter(transform);
    }

    private static void RefreshContentFitter(RectTransform transform)
    {
        if (transform == null || !transform.gameObject.activeSelf)
        {
            return;
        }

        foreach (RectTransform child in transform)
        {
            RefreshContentFitter(child);
        }

        var layoutGroup = transform.GetComponent<LayoutGroup>();
        var contentSizeFitter = transform.GetComponent<ContentSizeFitter>();
        if (layoutGroup != null)
        {
            layoutGroup.SetLayoutHorizontal();
            layoutGroup.SetLayoutVertical();
        }

        if (contentSizeFitter != null)
        {
            LayoutRebuilder.ForceRebuildLayoutImmediate(transform);
        }
    }

To use, simply call RefreshContentFitters((RectTransform)GameObjectContainingEverything.transform) and it forces everything to refresh correctly. If there are thoughts about how to avoid the need to do this, those are certainly welcome!

Thanks again!

3 Likes