The children inside a ScrollingFrame change their size depending on the CanvasSize value

Help and Feedback Art Design Support
#1

  1. What do you want to achieve?
    So, I have recently tried to make a Settings GUI. I have inserted a UIGridLayout object inside a ScrollingFrame object. Because this is a Settings GUI I will probably want to change the ScrollingFrame “CanvasSize” property in the future.

  2. What is the issue?
    Whenever I change the ScrollingFrame “CanvasSize” property to a different value, the children of the ScrollingFrame change their size to be either bigger or smaller, depending on how I change the “CanvasSize” value. I don’t want this to happen, I want the size of the children inside the ScrollingFrame to stay the same even if I change the “CanvasSize” value. The current “CanvasSize” value I use is {0,0},{2,0}. I want the children of the ScrollingFrame to have the same size they have with the {0,0},{2,0} value even though I change it to something like {0,0},{3,0}.

  3. What solutions have you tried so far?
    I have searched for related posts on the DevForum but I can’t seem to find what I need.

I have also attached an image to this post to show how the size of the children inside the ScrollingFrame change depending on the “CanvasSize” property being changed along with some other information you might need.

If anyone could help me it would be highly appreciated, thanks!

image
image1063×578 88.9 KB

1 Like
#2

Had a similar problem before. The solution is to convert the size to offset via script. It’s initial size will still be determined by scale, so it’ll fit all devices, but it will not scale size based on the parent. You need to do this with a script.

local frame = script.Parent --This is the path to the frame or whatever
local absSize = frame.AbsoluteSize

frame.Size = UDim2.fromOffset(absSize.X, absSize.Y)

This will work if you’re going to change the canvas size while the game is running by another script of some sort. If you’re talking about just changing it in the future, to expand the number of items in the grid style, then there is no solution. Just keep resizing it until you get the result you like.

7 Likes
#3

“The path to the frame” is what?

#4

Say for example, you have a ScrollingFrame inside of a normal frame, inside of a ScreenGui, inside of a player’s PlayerGui.

--PlayerGui
---->ScreenGui
------>Frame
-------->ScrollingFrame

This is how it would look in explorer, and this is what I mean by “path to the ScrollingFrame”. You have to get the frame as you would from the explorer view.

If the script is inside the ScrollingFrame, the path to it would simply be script.Parent.

If the script was in somewhere such as a player’s PlayerScripts, you’d have to get the path to it by getting the PlayerGui, then the ScreenGui, the frame, and then the ScrollingFrame

local frame = player.PlayerGui.ScreenGui.Frame.ScrollingFrame

Get the gist of it? It’s essentially how it looks in explorer.

#5

Ok!
But this is my script and i dont know why the offset didnt work for other resolutions like i tested on my phone.

local frame = script.Parent
script.Parent.ChildAdded:Connect(function()
	local absSize = frame.AbsoluteSize
frame.Size = UDim2.fromOffset(absSize.X, absSize.Y)
	local layout = frame:FindFirstChildWhichIsA("UIGridLayout")
	local absoluteContentSize = layout.AbsoluteContentSize
	frame.CanvasSize = UDim2.new(0, 0, 0, absoluteContentSize.Y)
end)

script.Parent.ChildRemoved:Connect(function()
	local absSize = frame.AbsoluteSize

	frame.Size = UDim2.fromOffset(absSize.X, absSize.Y)
	local layout = frame:FindFirstChildWhichIsA("UIGridLayout")
	local absoluteContentSize = layout.AbsoluteContentSize
	frame.CanvasSize = UDim2.new(0, 0, 0, absoluteContentSize.Y)
	

end)
#6

Shouldn’t there be a value for the x for the canvas size? That might be why.

If that’s not the problem, did you initially set the size of everything to scale instead of offset? The script converts the size to offset based on it’s scaled size when the game runs.

#9

Hey everyone! I appreciate the activity on the thread but the problem is now solved. Your recent comments are off-topic from the original post. I recommend to start a new thread than to keep posting replies on this one as it has nothing to do with the original post.

#10

It works for me but now it isn’t UX proof for mobile phones any solution to that?

#11

Hi, apologies for a mega bump but I’d like to know do I need to convert the size of EVERY single thing in side my UI to the offset?

Also the solution is a little confusing, a little more explination would be useful, also wouldn’t you want to convert the size of the scrollingframe in the end rather the frame?

Thanks, major apologies for this sin lmfao.

#12

Hey,

I’m not exactly sure how to fix my original problem as I haven’t created GUIs for a while.
But I do remember that there was a solution which I found out and it worked. I just can’t remember it. As for your questions, you can ask the person with the solution, I’m not sure for any of them.

Thanks!

1 Like