Quick Tutorial: How to make scrolling frames properly

[Tom_atoes]

Quick note: this is meant for people who have little to no UI expierence so they can improve their games design.

This tutorial may no longer be needed because of the new AutoCanvasSize property - however this property has some issues as of now and I am not sure if it works in game or studio only.

Note: it is recommended that you don’t use “scale” for sizing your frames but instead “offset”.

Don’t you just hate it in games when you have an inventory GUI that is too small to fit all your items or is too big? Well, don’t be one of the developers who do that. Get all your scrolling frames to fit it’s content perfectly. No overscrolling, no underscrolling, just perfect.

You can do this easily in a few basic steps, I will be going over how to do it with UI constraints, if you aren’t using UI constraints then I highly recommend using them.

---

Step 1: Getting the content size of your frame.

You can easily get the content size of your frame with the property under your List/GridLayout “AbsoluteContentSize”, this will return an X and a Y value.

Step 2: Setting your Canvas Size.

Now all you have to do is set your Canvas Size X and Y Offset to the Absolute Content Size values.

If you are using this for a constantly updating UI such as a player list or inventory then I would recommend making a function that you fire everytime those things update.

Example:

local function UpdateCanvasSize(Canvas, Constraint)
    Canvas.CanvasSize = UDim2.new(0, Constraint.AbsoluteContentSize.X, 0, Constraint.AbsoluteContentSize.Y)
end

Just run this function whenever you want to update your canvas size, the “Canvas” argument is the scrolling frame and the “Constraint” Argument is the UI constraint.

If you are using this for something that isn’t constantly updating like a store GUI then you can either manually set it or set it via a script.

You are now ready to do me proud and make some proper scrolling frames, please do it. Improve your user expierence, please.

[EmeraldSlash (Rio)]

Here’s a real working example of this method being used in a ScrollingFrame list taken from my code:

local scrollingFrame = script.Parent.ScrollingFrame
local listLayout = scrollingFrame.UIListLayout

local generateList = function(items)
    -- clear children of scrollingFrame
    -- for each item in items, clone a template and parent to scrollingFrame

    -- update CanvasSize to be the size of listLayout
    scrollingFrame.CanvasSize = UDim2.new(0, 0, 0, listLayout.AbsoluteContentSize.Y)
end

You can use the exact same method to update a ScrollingFrame with any type of layout (grid, table, etc.)

[Tom_atoes]

Fixed the errors, thanks for correcting me.

[NinjoOnline]

Doesn’t seem to work perfectly for me using lists

Friends.CanvasSize = UDim2.new(0, 0, 0, Friends.UIListLayout.AbsoluteContentSize.Y)

Cuts off the bottom player (not sure if there’s more below either)

[Tom_atoes]

I’m not getting this issue, does your GUI constantly change its children?

[NinjoOnline]

Yes, however I set the size AFTER all the contents has been added

spawn(function()
	for i, v in pairs(FriendsUsernames) do
		createFrame(v, Friends)
	end

	Friends.CanvasSize = UDim2.new(0, 0, 0, Friends.UIListLayout.AbsoluteContentSize.Y)
end)

[Tom_atoes]

Try adding a wait() just after your loop.

[NinjoOnline]

No change

[boatbomber (Zack_Ovits)]

Using the Explorer and Property windows, check what the UIListLayout AbsoluteContentSize.Y is, and what the ScrollingFrame CanvasSize.Y.Offset is. Let us know the numbers and let’s figure out what went wrong.

[Tom_atoes]

Are you sizing your frames with offset or scale (y axis)? This could be the issue because as your canvas size increases the frames size will also increase if you are using scale. I would recommend using Offset for scaling your scrolling frames children.

[cxmeels]

local generateList = function() ... end

UIListLayout:GetPropertyChangedSignal'AbsoluteContentSize':Connect(function()
    Friends.CanvasSize = UDim2.new(0, 0, 0, UIListLayout.AbsoluteContentSize.Y)
end)

may help?

[VegetationBush (FartedWayTooHard)]

It’s not working for me, can anyone help

[Tom_atoes]

Are you using scale or offset to size the items in your list layout?

[VegetationBush (FartedWayTooHard)]

offset, but things get added and subtracted overtime, and .Change doesn’t work because I use Visible.

[NinjoOnline]

As far as I can scroll done before it stops

[Tom_atoes]

Are you using scale or offset to size your scrolling frames children?

[NinjoOnline]

I’m using Scale for this

[Tom_atoes]

That is your issue. Scale will auto resize your frames to fit the canvas size.

[Blue101black]

Did you find a fix for that? Experiencing same issue.

[Tom_atoes]

You are probably using Scale and not Offset to size your scrolling frames children. You need to use offset for this to work.