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

Help and Feedback Scripting Support
, ,
#1

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:

image

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…

image
image595×507 118 KB

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.

9 Likes
#2

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)
5 Likes
#3

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?

1 Like
#4

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

1 Like
#5

this is what happens…
image

1 Like
#6

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

2 Likes
#7

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

3 Likes
#8

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:

image
image1357×714 61.8 KB

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.

image
image1324×668 46.1 KB

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.

image
image1330×678 49.1 KB

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:
image
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 :slight_smile:
GUIScrolling.rbxl (41.1 KB)

39 Likes
#9

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.