How do I make a auto scaling Scrolling Frame?

There is going to be a lot of frames going into my scrolling frame so I need it to size its self. I’m using a gridlayout. I have tried many solutions on the DevForum, google, youtube, ect. but I cant find anything that works right. If you can help me that would be great.

You can look at the object browser you will find many things just find the scorrling frame then look at all the choices.

Make sure you read each one.

no, I already have a scrolling frame I want it to auto scale to the amount of frames in it.

I just found one you can use so when ever the player scorrls you make the frame go deeper.
use this to see when the player scrools on the frame

Frame.CanvasSize = Frame.CanvasSize + {0, 0},{5, 0} -- Change the five to any number

you can do that by
changing this

Try this module just create it insert a UIAspectRatioConstraint in ur uigridlayout and type in a localscript
local layout = require(pathofmodule)
done :slight_smile:

Did this help???

If you want the canvas size to alter automatically for all the guiObjects in it then might I suggest the AutomaticCanvasSize property on a ScrollingFrame?

Edit:On reread of this forum, this is exactly what you need


You can do this by just changes the 100 here to the number you want!

lol this works, never knew there was option lol, thanks.

:o I didnt know about UIAspectRatioConstraints, I spent actual ages writing a script and doing mafs ew trying to replicate this. Sorry for going off topic

LayoutUtil doesn’t do that anymore with the new addition of AutomaticCanvasSize. Internally it will automatically create UIAspectRatioConstriants and calculated it (you can use the plug-in to do it while in studio) to maintain each elements aspect ratio.

This is not a solution as the property doesn’t seem to be working for lots of people (including me).

I have recently made a Module that will be relased to the public soon. Here it is: There is an option to automatically scale ScrollingFrame based on 3 arguments: ScrollingFrame object, UIListLayout / GridLayout etc. object and on Enum.ScrollingDirection.XY / X / Y thing.

Here’s how you can use it in a script:

local lua_plus = require(script:WaitForChild("lua_plus")--[[Location of LUA Plus here.]])
local ScrollingFrame = script.Parent --Location of your ScrollingFrame here.
local UIListLayout = script.Parent:WaitForChild("UIListLayout") --Location of UI object that have AbsoluteSizeProperty. It can be done with UIGridLayout too, I think.
local UpdateDirection = Enum.ScrollingDirection.Y --Can be set to X, Y or XY.

lua_plus.update_canvas_based_on_children(ScrollingFrame, UIListLayout, UpdateDirection)
    lua_plus.update_canvas_based_on_children(ScrollingFrame, UIListLayout, UpdateDirection)

    wait(0.1) --Because Event fires right BEFORE the Descendant is removed.
    lua_plus.update_canvas_based_on_children(ScrollingFrame, UIListLayout, UpdateDirection)

Here are the results:

Here is my testing Baseplate you can download:

Testing Baseplate.rbxl (30.1 KB)


This is the right way to do it but I should add here that you need to make the size of the canvas to (0,0,0,0) in order to work

1 Like