Nested Content Size Fitters

Hi I want to use a structure of nested Panels and other UI Components and use Content Size Fitters for scaling. For one Panel the Content Size Fitter works but when I use one in a sub panel it doesn’t.

Is it even possible to use multiple content size fitters on sub elements?

My UI should look something like this:

Main Panel with content size fitter and Vertical Layout
→ Multiple Subpanels with Grid Layout and content size fitter
→ UI Elements inside the panels.

1 Like

My nested ContentSizeFitters display a warning about having a parent with a layout group component, however the layout works correctly in Unity 2018.2. My layout is:

ContentSizeFitter (vertical Preferred) + VerticalLayoutGroup (all zeroes no checkboxes)
  -> ContentSizeFittrer (vertical Preferred) + VerticalLayoutGroup (child controls size Height)
     --> Text
  -> ContentSizeFittrer (vertical Preferred) + VerticalLayoutGroup (child controls size Height)
     --> Text
  -> ContentSizeFittrer (vertical Preferred) + VerticalLayoutGroup (child controls size Height)
     --> Text

Gotcha that got me: Even if you only want a single nested item with zero padding, the top level ContentSizeFitter will not work (height 0) unless it also has a VerticalLayoutGroup.

I wasted a lot of time on this originally. Don’t nest Content Size Fitters, they don’t work together.

  1. Have a content size fitter only on your topmost element, set to Preferred Size
  2. On your layout group elements, check all 3 of Control Child Size, Use Child Scale and Child Force Expand.

Say, if you want your panel to have static width but expanding height (in my case, contained text box), then just set these for the vertical/height parameter but leave horizontal/width untouched.