Question Set min and max height for UI element (ScrollView)

Hello everyone,

I'm using Unity 2021.1.24f1 and I can't get my Scroll View to look and act the way I want it to:

I instantiate buttons (could be 0 or even 50+) and add them to the Content at runtime. To align them properly the Content uses a Vertical Layout Group with some padding (Control Child Size/Child Force Expand: Width, rest not ticked) and a Content Size Fitter (horizontal: unconstrained, vertical: min).

The Scroll View itself has a "Layout Element" component (min height: 100, preferred height: 200) and is the child of a regular panel, which also uses a Vertical Layout (Control Child Size: "Height" ticked) + a Content Size Fitter set to "preferred height".

What it does at the moment:
The Scroll View is always 200 units tall, unless I set the parent's Content Size Fitter to "min", then it's always only 100 units tall - independent of the size of its Content. The only difference between 0 and 10 elements is the scroll bar that shows up once the Content exceeds 200 units (because it's set to auto-hide).

What I actually want:
0-2 elements: The Scroll View is 100 units tall
3 elements: A bit taller
4 elements: A little bit taller again
5 Elements: Reach the max height of 200 units
6+ elements: Always 200 units with scroll bar

How do I accomplish this just in the editor, so without using any code? Is this even possible?

 

I haven't really used it yet but since you're on 2021.1, you should be better off using UI Toolkit instead. The classic Unity UI is just very limited and you need all kind of hacks to get the rest to work properly.
If you can't or don't want to do that, you can get your desired behavior by changing the sizes and scroll bar visibility from code depending on the amount of elements - there are no methods to add such logic without code (or visual scripting).

 

@kjyv
I've only got pretty basic UI, a couple of panels I use as pop-ups and a little bit of TMP text in the scene and everything works fine. There are just a couple of little tweaks that would be nice (like the ScrollView's height) but that I don't want to learn a new system for (a system that's pretty new and might still have bugs).
About changing it in code: The ScrollView's height is set by the VerticalLayoutGroup and it's greyed out because of that, so I'm not sure if I can even change it in code without it bugging out somehow.

 

Yeah, it makes sense to stick with it for the time being in many cases (that's also why we haven't used it yet). But since you just have basic UI, it is probably quick to switch anyway.

One general observation I have made is to not mix Layout Groups and Content Size Fitter unless you absolutely have to. You can do most things with Layout Elements and the usual Rect Transform modes to stretch into parent etc.
In code here means: set the Preferred Height value, not the Rect size. It is of course changed by the Layout Group.

 

My ScrollView contains multiple buttons, if I don't use the Vertical Layout Group and the Content Size Fitter (or just one of them), then the scroll bar stops working (doesn't show up, wrong length or isn't scroll-able). The interesting/weird bit is that the buttons don't use a "Layout Element" component.

I thought you need the Content Size Fitter on the parent if you're using a "Layout Element" component on the children?