Automatically Sizing Scrolling Frame Based on Its Children

I have a ScrollingFrame GUI that will have a large number of items in it. Unfortunately, when all items are present, the scroll bar does not go down far enough to capture all of the items.

Here is an example of what I mean:
https://i.gyazo.com/c8576daf3a34544a80950796d2b915dd.mp4
You can see that at the bottom of the list, there are still more ‘Test’ frames to be seen, but the CanvasSize of the ScrollingFrame is not great enough to be able to reach them.

At the moment, I am using a UIListLayout inside of the ScrollingFrame to automatically position the items inside of it, but I am not sure how to continually set the CanvasSize of the ScrollingFrame based on the size of its contents, while also keeping the size of its contents the same (because changing the CanvasSize also changes the size of things inside the ScrollingFrame).

5 Likes

Changing the CanvasSize Y.Offset should do the trick

ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, UIListLayout.AbsoluteContentSize.Y)
4 Likes

So I put that script in based on when the AbsoluteContentSize gets changed and this is the result:
https://i.gyazo.com/0e0bfc4907fbc8fe4bd3bba1e21a0ada.mp4

You can see that at first glance the items are immediately smaller. Then, you see the sizing glitching out. I’m guessing it’s because changing the CanvasSize also changes the size of the contents of the ScrollingFrame (thus increasing the UIListLayout’s AbsoluteContentSize, triggering the Changed event), so it causes an infinite loop of sizing it up

Here’s what made it work for me–

Each of the elements in my list has a UIAspectRatioConstraint with these properties:

image

Assuming your elements are sized with scale, they will vertically stretch when you increase the CanvasSize.

However, with this UIAspectRatioConstraint inside every element, each element will be prevented from increasing in height after a certain point.

Of course, feel free to change the AspectRatio to whatever fits your purpose ​ ​ :+1:

39 Likes

Works like a charm, thanks! I’ll let you know if I have any more problems with it.

2 Likes