Difference between ScrollingFrame.AbsoluteSize vs UIGridLayout.AbsoluteContentSize & dynamic resizing based on item count?

[JustaLatvian]

Hi, I’ve been at this for hours on end, with no progress what so ever. How do I make dynamically resizing scrolling frame, if the ScrollingFrame.AbsoluteSize and UIGridLayout.AbsoluteContentSize output different numbers? Which do i use? Right now I’ve gone back to basics, and even the basics don’t seem to be working:
robloxapp-20200707-1227439.wmv (122.5 KB)

Most of the times AbsoluteContentSize is displaying the Y value as inf or nan…

I’ve tried what i could find on devforum, had mixed results unfortunately.
Current code is simply:

local gridLayout = plrItems.UIGridLayout

gridLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
  local absSize = gridLayout.AbsoluteContentSize
  plrItems.CanvasSize = UDim2.new(0,0,absSize.Y,0)
end)

And with aspect ratio constraint in the item & grid

What i’m trying to do is make the items stay the same size, and same 5 items per row, regardless of how many there are:

And make it as such that when resizing the window, they would resize, too, which sounds like scale, but maybe could be done offset only.

Where do i go from here?!

[WallsAreForClimbing (Climber)]

Square cells in # columns

Insert a UIGridLayout into the scrolling frame with the properties:

CellPadding:	{0, 0},		{0, 0}
CellSize:		{0.2, 0},	{0, 0}

Then inside of that UIGridLayout insert a UIAspectRatioConstraint with the properties:

AspectRatio:	1
AspectType:		ScaleWithParentSize
DominantAxis:	Width

This will result in a grid of square cells in 5 columns.

---

Resizing ScrollingFrame to contents

Layouts have the property AbsoluteContentSize, this represents the absolute size in pixels taken up by all elements in the layout. If you want a scrolling frame to display all of the content in a layout then you should update CanvasSize to match AbsoluteContentSize. You can do this with the following code:

local gridLayout = ...
local scrollingFrame = ...

gridLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function ()
	local contentSize = gridLayout.AbsoluteContentSize
	scrollingFrame.CanvasSize = UDim2.fromOffset(0, contentSize.Y)
end)

If you want to scroll horizontally, you would update the X component of CanvasSize instead of the Y component.

[JustaLatvian]

Thank you, It’s a lot better now. Question is, would it be possible to calculate CellPadding so that it is constant size when adding new elements and extending the CanvasSize, but still stays the relative distance between the items, when resizing the whole gui? So, essentially offset+scale? I’m given to understand that the AbsoluteContentSize includes the padding, too, which has made my life, figuring out this problem, a little bit harder…

EDIT: I found how:
What this does is take the AbsoluteSize of the window itself, not the canvas, and, using proportions, calculates the offset necessary to keep the gap constant. The 0.055 is what worked for me, but that can be changed to whatever.

[dragon_9086 (Sinister)]

Man you saved me i’ve been trying to make this all day and just found this reply. Works perfectly, thank you!