How do I scale a ScrollingFrame?

Hi everyone,
I’m looking to achieve an inventory system where the more items a player has, the more the ScrollingFrame can go down. (I currently having a ScrollingFrame with a UIGridLayout inside)

As of right now, once the ScrollingFrame reaches a certain point, it will not be able to go down anymore (despite having more items). This is because the CanvasSize is set at a certain number. If I attempt to change the CanvasSize, the buttons within the ScrollingFrame will be resized as well. How do I get the CanvasSize to change without altering my button sizes?

--// Variables
local ScrollingFrame = script.Parent
local GridLayout = script.Parent.UIGridLayout
local ContentSize = GridLayout.AbsoluteContentSize


GridLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
	local ContentSize = GridLayout.AbsoluteContentSize
	ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, ContentSize.Y)
end)

Goal:

Result:
Screenshot_2

Screenshot_3

1 Like

You should use a UIAspectRatioConstraint inside each of the objects you put inside the scrolling frame. Change the AspectRatio property around until you get the desired shape.

Aspect Ratio Constraints will keep a specified ratio without going outside of the bounds specified by it’s parent’s size.

1 Like

For things like these, use scale for the x size and offset for the y size with a UIGridLayout, then insert a UIAspectRatioConstraint as a child of the GridLayout. Then that script should work.

2 Likes

Long time ago but thumbs up for your big brain Sqruitle it helped my project in a big way!