(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.
When using a layout group along with a content size fitter, it is by design that we throw this warning. It might work well in your scenario and you might not have to worry about it, but in some cases the UI will not layout properly. This is because the UI system needs to update twice (1- layout group, 2- content fitter) in order to get the proper layout. You can call this second update manually with a force rebuild if you want to be sure your layout acts properly every time, but there is a performance cost. There is no better way with uGUI to make scalable content inside a ScrollRect.
You can also take a look at this thread , the second point’s answer gives additional insight.
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!
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.
Thank you both for the explanation and solution. I searched for 3 hours and only this solution worked. I originally omitted the middle “viewport”, and I got the error message about not allowing a content size fitter and layout group together, so I abandoned that without realizing that it probably would have worked.
