Quick Tutorial: How to make scrolling frames properly

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

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.

image

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 “AbsoluteContentSize”, this will return an X and a Y value.

image

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.

image
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.

13 Likes

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.)

5 Likes

Fixed the errors, thanks for correcting me.

2 Likes

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)

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

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)

Try adding a wait() just after your loop.


No change

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.

2 Likes

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.

local generateList = function() ... end

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

may help?

2 Likes

It’s not working for me, can anyone help

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

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


As far as I can scroll done before it stops

1 Like

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

I’m using Scale for this

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