How too automatically change the Canvas size of a ScrollingFrame

Help and Feedback Scripting Support
, , ,
1

I want to automatically change the Canvas size of a ScrollingFrame on the Y axis, when a new frame is added. I’ve tried using the property “AutomaticCanvasSize”, however I didn’t get the results I wanted

2

Hi!
So I first tested automatic canvas size, and roblox should really fix that because you are correct, it doesn’t work.

so you can use childadded:

local scroll = --your scrollingframe
scroll.ChildAdded:Connect(function()
 local childCount = #scroll:GetChildren() -1 --because of UIListLayout
 local desiredY = (YOUR_FRAME_Y + YOUR_UI_LIST_PADDING) * childCount

 if desiredY > scroll.AbsoluteCanvasSize.Y then
  scroll.CanvasSize = UDim2.fromOffset(scroll.AbsoluteCanvasSize.X, desiredY + OPTIONAL_OFFSET)
 end
end)

you can use this event if all of your frames are expected to have the same Y size, if they don’t, you’d have to add an extra loop like so:

local scroll = --your scrolling frame
scroll.ChildAdded:Connect(function()
 local desiredY = 0
 for _, child in ipairs(scroll:GetChildren()) do
   if not child:IsA("GuiObject") then continue end
   desiredY += child.AbsoluteSize.Y + YOUR_UI_LIST_PADDING
 end

 if desiredY > scroll.AbsoluteCanvasSize.Y then
  scroll.CanvasSize = UDim2.fromOffset(scroll.AbsoluteCanvasSize.X, desiredY + OPTIONAL_OFFSET)
 end
end)

Now it will correctly scale the Y axis to fit all items.
Replace the all caps words with the actual values that their names refer to.
eg: YOUR_FRAME_SIZE is the Y size of one frame, because all frames have the same size in that case. UI_LIST_PADDING is the padding in offset (so no scale) that is added, because we also need to account for the empty gaps between elements if padding is present.

and OPTIONAL_OFFSET is just a value you can add, say like 5 and then your frame would fit all items + 5 pixls this way you can be sure that they all fit, if it isn’t necessary then just delete that.

Hope this helps!

3

You set the property on y vertical or X horizontal