How to create an AUTO-SIZING scrolling frame that FITS ON ALL DEVICES?

iloveyoutube4474 · December 20, 2021, 9:40am

Hello.

I have been having this issues for days now and cannot find a solution. I know that this question has been asked so many times, but seriously I cannot find a good solution. I am creating a shop GUI, and I want it so the scrolling frame automatically resizes when a child is added to it. I am using GridUILayout to do this:

I am running into many issues though, with sizing.

I have read heaps of posts here on the devform and there are so many different ways.

Some people say to size your scrolling frame using OFFSET, and not SCALE. Okay… I do that and it only stays one size, and is way too big for smaller devices.

Then, people suggest to make the size of the canvas to the AbsoluteCanvasSize…

This is only using offset, so how will it scale for all devices?? It won’t.

So then, I try some scripts… maybe these will work! Nope. You have to use OFFSET for these scripts to work. I can’t use offset because it won’t scale properly for all devices (unless there is a proper way to do this???). When I use these scripts for the scrolling frame, since I am using SCALE, it goes in a never ending loop of getting bigger and bigger and bigger and never stops this loop because the scale is always changing… so this doesn’t work.

Then someone suggested to leave the frame and make all the children with a UIAspectRatioConstraint in them. I do that and again, nothing happens. So I tried a auto sizing script with the frame and children, and now the children have HUGGEEE gaps between them because of the UIAspectRatioConstraint, and the scrolling frame still cuts of the rest of the buttons.

I am so close to just giving up and using a really badly designed frame. At this point I do not know what to do.
Offset or scale? What constraints? can I use offset and somehow still make it scale for all devices? Why won’t anything work well with UIGridLayouts.

I have read nearly every article here on the forum about this and there are way too many ways and suggestions and scripts. What is a proper way, that works? Please help me. I’m desperate.

ItzBloxyDev · December 20, 2021, 9:53am

Here is what I did to fix this:

local ScrollingFrame = script.Parent
local Layout = ScrollingFrame.UIGridLayout

ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, Layout.AbsoluteContentSize.Y)
Layout.CellSize = UDim2.new(0.2,0,0,Layout.AbsoluteCellSize.Y)--0.2 so it fits 4 in a row

ScrollingFrame.ChildAdded:Connect(function()
	ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, Layout.AbsoluteContentSize.Y)
	Layout.CellSize = UDim2.new(0.2,0,0,Layout.AbsoluteCellSize.Y)
end)

iloveyoutube4474 · December 20, 2021, 9:54am

Can you also explain your GUI…

Did you have any constraints? Did you use scale or offset for the scrolling frame? Did you use scale or offset for the frame’s children?

ItzBloxyDev · December 20, 2021, 9:55am

Oh the scale and offset are done in the script (It uses scale to fit on other devices) and it has a UIAspectRatioConstraint. The script is inside the scrolling frame

iloveyoutube4474 · December 20, 2021, 10:14am

this is what happens…

ItzBloxyDev · December 20, 2021, 10:16am

Then your proably want to make the 0.2 in the script to a smaller number such as 0.15

iGiDgames · December 24, 2021, 4:53am

I really appreciate the level of exasperation you expressed in this post because it mirrors mine.

iloveyoutube4474 · December 24, 2021, 5:32am

Okay, after hours and hours and hours of messing around, I finally figured it out.

So, you can make your shop and scrolling frame however you desire, that being scale or offset. Its up to you.

I will use this current GUI I am creating for a church group.

I have found that it is best to create your shop frame with OFFSET. (At least for everything I have created recently). A frame might look really nice on a Laptop, when created with scale, but then when it is put on a phone, it shrinks to a very small size (obviously because scale uses the devices screen size).

This GUI looks great on a laptop, but could you imagine that the picture is on a phone. Imagine how small the GUI will be and trying to click buttons etc. You want the GUI to be nice and big on small devices so that it is easy for mobile users to use:

SINCE I USED OFFSET for the GUI, this is what I get on a mobile device:
This is a lot better, because the GUI is bigger on mobile devices, since I used OFFSET.

HOWEVER, if I used SCALE, this is how tiny it would be on a mobile device:
While the GUI gets messed up because of how small it is, imagine trying to click the tiny buttons on your small mobile device. It would be a nightmare.

There are times when scale would be better, such as covering the whole screen, or when you have a big GUI. But for smaller GUI’s, I am using OFFSET a lot more now.

Now for the next part:

Since your GUI is being created with OFFSET (or with scale), you can just simply use SCALE for the scrolling frame. I find it best to structure the GUIs as such:

In my GUI I have the actual ScreenGUI, then a frame which I make the size that I want for the shop (offset), then I add the constraints that I want, then I create a scrolling frame where I want the items to be (scale).
As long as your first frame that holds everything is sized with OFFSET, you can just make everything from this point on with scale or offset - they will do the same thing.

YOU MUST CREATE YOUR ITEMS FOR THE SCROLLING FRAME WITH OFFSET, OTHERWISE THE FRAME WILL NOT SCALE PROPERLY.

Fitting an unlimited amount of items in the frame:

I think we all have the issue where we just don’t know how many items will be in the scrolling frame, or maybe you are creating an inventory frame, so there could be 10 items or 200 items. This is where automatic sizing comes in. I have used ROBLOX’s own AutoCanvasSize property and sometimes it does not work; this is where this simple script comes in:

This script works with both UIListLayout and UIGridLayout. When you run the function UpdateCanvasSize(Canvas, Constraint), reference the scrolling frame first, then the constraint you are using (list or grid). I have ‘+20’ for the Y axis in the script because I found that some items got cut off by a small amount, and have never had an issue since I added the ‘+20’. Feel free to remove it, or change according to your GUI.

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


wait(2) -- I have this wait because I use scripts to import items, so it needs time to wait for all items to come in.

UpdateCanvasSize(script.Parent, script.Parent.UIGridLayout)

Now, once the function runs, you should have a nicely sized scrolling frame that doesn’t have a bunch of white space at the end.

Conclusion:

I really hope this helps. If you need any help, please contact me: harrray#6505.
I know ROBLOX scrolling frames can be such a pain (I wish they would do something about it lol). if you need help, Id be more than willing to help, answer questions, or join your team create!
Bye.

File Download

Here is a file to download in case you need to see something for yourself! Feel free to use this as your template
GUIScrolling.rbxl (41.1 KB)

redofaneex · December 22, 2023, 7:16pm

Oh my gosh, you’re a lifesaver! I had a comission due and was trying to fix it for HOURS. Roblox should just implement these things automatically.

MRKitty20911 · August 5, 2024, 8:31pm

Why do it so complicated?
I just do .1,0,.1,0 for all of my sizes and boom it works!

8O8_guy · August 11, 2024, 10:02pm

For anybody that’s making all of their UI with scale instead of offset: you can simply set the CanvasSize of the ScrollingFrame to {0, 0}{0, 0} and set AutomaticCanvasSize to Y. Your scrolling frame will expand dynamically as new content is added but this will not work well if your UIListLayout or anything else that automatically layouts stuff (and supports padding) is present and has padding enabled.

Jessisduhmb · October 19, 2024, 12:35am

hi, i know you posted this like years ago but… what if i do have padding?.. what can i do?

SkullNotS · October 20, 2024, 6:24am

I use a plugin called AutoScale Lite and all you have to do is press “Unit” and then “Scale” on the top and bottom. And thats it, it will automatically fit your UI for all devices. I hope this helps!

starburst_creator04 · December 13, 2024, 3:03pm

Take your padding offset value (your UIPadding inside a ScrollingFrame should always have a offset value instead of scale, it’s an unspoken rule.), multiply it by 2 and change the +100 in the given script to +(offset value * 2).
e.g. if your UIPadding is set to 0,25, then you would do +50 (since 25 * 2 = 50)

For me, this mechanism seemed to work best for me.

Kinohisa · December 31, 2024, 9:15am

I know I am very late to this but this was my solution:

local ScrollingFrame = script.Parent
local Layout = ScrollingFrame.UIGridLayout
local RunService = game:GetService("RunService")

ScrollingFrame.CanvasSize = UDim2.new(0,0,0, Layout.AbsoluteContentSize.Y)

RunService.RenderStepped:Connect(function()
	local newSize = Layout.CellSize.Y.Scale*#ScrollingFrame:GetChildren()/3 -- 3 is how many I want per row
	ScrollingFrame.CanvasSize = UDim2.new(0,0,newSize,0)
end)

Now this script is extremely labor intensive seeing as it uses RenderStepped, but if you are adding children via a script then you could use ScrollingFrame.ChildAdded:Connect(function()) then run the function.