Issue with Dynamically Resizing Scrolling Frame

[TheGaelicKing (Garlic)]

Now I realize that there are already many other topics about this issue, but I’ve already looked at them and I haven’t been able to solve my problem.

In my case, which is probably common, I’m creating an inventory UI. The inventory UI hierarchy is shown below:

The actual UI looks like this:

As you might be able to guess, I’m having issues resizing the scrolling frame as new content is added. I haven’t dabbled too much in UI design so I’m not sure what is efficient. The script I use right now is named “DynamicResize” and contains the following code:

local inventoryFrame = script.Parent
local gridLayout = inventoryFrame.UIGridLayout

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

Unfortunately, I suspect that a scaling issue is causing the script to create an infinite resizing loop as shown here: https://gyazo.com/37e1200395c77617e62997922d76a559

These are the properties of the parent frame, the item frame, the grid layout, and the aspect ratio constraint:

The aspect ratio is just set to 1 for a square image.

[Ancientroboman]

What I would personally do, is set the CanvasSize to however tall one of those inventory slots are, times the number of rows you have. I’d do this every time something gets added or removed from your inventory. It would look something like this:

local SquareHeight = 100 --or however tall the inventory squares are
local function UpdateCS()
   local Items = #Inventory:GetChildren() - 2 -- minus 2 to ignore the grid and script
   local Rows = math.ceil(Items / 4) -- amount of rows
   InventoryFrame.CanvasSize = UDim2.new(1, 0, 0, (Rows * SquareHeight))
 end

Inventory.ChildAdded:Connect(UpdateCS) -- every time something gets added, update
Inventory.ChildRemoved:Connect(UpdateCS) -- every time something gets removed, update
UpdateCS() -- do it once anyways for good measure

[TheGaelicKing (Garlic)]

Oh that’s a good idea, let me try out it and tell you how it went

[Scriptos]

AbsoluteContentSize seems to work fine in a similar case for my inventory system, but the difference is that I have a UIAspectRatioConstraint’s placed inside of my UIGridLayout (which you can actually do rather than placing one inside of each element).

I found unexpected behavior in that it it scales differently/better if you have UIAspectRatioConstraint’s in both places. I’m not sure why this is the case, though. I’d expect to just be able to pop the RatioConstraint inside of the GridLayout and that’s it. It’s odd behavior to me and AFAIK undocumented officially on the wiki.

There is a post that describes this behavior, though:

@EmeraldSlash

This layout is like a more advanced UIListLayout that automatically puts everything into a grid instead of a list. You need to manually specify the size of each object in the grid, which has led to some difficulty when it comes to maintaining aspect ratio. Fortunately you can use a UIAspectRatioConstraint to maintain aspect ratio of grid cells by parenting said constraint inside the UIGridLayout.

[TheGaelicKing (Garlic)]

Thank you both for your assistance and for taking the time to reply! I have found a solution from the article you posted. More specifically, this post. I appreciate your help.