When scrollingframe's CanvasSize is changed, all the children are resized and look weird

Help and Feedback Scripting Support
1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!

I want to make sure whenever I am resizing the canvasSize that the children frames dont resize and look weird

  1. What is the issue? Include screenshots / videos if possible!

When CanvasSize isnt resized:
image

When CanvasSize is resized:
image

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

I have tried searching it on the devforum but I have found nothing that had helped.

No code just need help on it before I write it

Thanks,
Indelton

2

Here’s the setup I always use. Change the “Main” variable to your ScreenGui and you can also change the Padding and XCells variables. After it’s set up, just add all the frames you want to the ScrollingFrame and it’ll all be adjusted automatically. The CanvasSize of the ScrollingFrame is automatically adjusted to the exact length to fit all of your frames, so if you only have a few frames to display, it probably won’t have a scroll bar until you add enough to where it’s needed.

image

local player = game.Players.LocalPlayer
local Main = player.PlayerGui.Main -- Replace with the name of the ScreenGui (It'll be directly under StarterGui)
local ScrollingFrame = script.Parent.Parent
local UIGridLayout = script.Parent


UIGridLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
	local absoluteSize = UIGridLayout.AbsoluteContentSize
	ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, absoluteSize.Y)
end)

local function CalcCellSize()
	local Padding = .05
	local XCells = 3
	local Size = (ScrollingFrame.AbsoluteCanvasSize.X*(1-Padding))/XCells
	local PaddingSize = (ScrollingFrame.AbsoluteCanvasSize.X*Padding)/XCells
	UIGridLayout.CellSize = UDim2.new(0, Size, 0, Size)
	UIGridLayout.CellPadding = UDim2.new(0, PaddingSize, 0, PaddingSize)
end

repeat wait() until ScrollingFrame.AbsoluteCanvasSize ~= 0
CalcCellSize()

Main:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
	CalcCellSize()
end)
4

Thanks! Sorry for the late reply, I did see the response but forgot to reply!

1 Like