Resolved The correct way to use content size fitter inside ScrollArea

Often I will want the Content inside a ScrollRect to automatically fit its contents. Using a ContentSizeFitter causes the following error to appear:



(Parent has a type of layout group component. A child of a layout group should not have a Content Size Fitter component, since it should be drive by the layout group.)

With HorizontalLayoutGroups, you can change the settings to be "Control Child Size" and add a layout component to the child, then the content will automatically fit without a content size fitter. But there are no such options on a ScrollRect, so is there a way to either make this error go away, or a better way of making scalable content inside a ScrollRect?

If it's fine to ignore the error then that's okay, but I know if you ignore the error with other layout groups, you often get strange behaviour where the size doesn't update correctly.

 

Yeah, I've definitely ignored that warning with VerticalLayoutGroups before and got some weird behaviour in the past, was really happy to find out about how to do it properly. Good to know I'm not missing some similar trick with ScrollRects!

 

The way I set up scroll rects is:

I have never had any issue with that setup.

 

It's definitely possible to have dynamically-sized content inside a Scroll Rect. I've done it a few times in the last couple of days. My setup is the same as Trisibo's, above.

It took me some time to grasp why it works. I'll try to explain it below, for anybody who might be looking to understand like I was.

The 'Content' GameObject is the one which needs to change size. When you add the layout group to that object, as you'd expect, it controls the size and position of any children according to its settings. But the critical thing for present purposes is that (per the docs) the same component also functions as a 'layout element'. What that means (in my mental model, at least) is that it broadcasts the size that it 'wants' to be in order to properly display its contents.

That alone is not sufficient to resize it. We need some second component to act as a 'layout controller': that is, to receive the broadcast and set the size accordingly. That's what the Content Size Fitter does. Once you add that, and set one of its dropdowns to 'Preferred', you should be able to add and remove children and see the 'Content' GameObject resize dynamically.

This also won't generate the warning in the screenshot above, because (with reference to Trisibo's post again) the Viewport doesn't have a layout group, so there's no conflict.