Keeping equal gap with multiple frame using UIGridLayout?


#1

Hi everyone!

I have a slight problem with frames in a scrollingframe (using UIListLayout), each using UIGridLayout.

Basically, I want to be able to put as many imagelabels inside each frame and still have an equal gap between the main frames in the scrollingframe. Hopefully this quick sketch explains what I’m trying to accomplish:

Image

image

This is the current layout:
image

However, I’ve come across a problem. The UIGridLayout does not actually increase the size of the frame - this means if there are more or less imagelabels so that they either don’t fill or overfill the frame, there will not be an equal gap. Adjusting the padding therefore doesn’t fix it either.

This is shown here: The UIGridLayout carries on adding more frames, esentiall which is what I want but the size is not updated which esentially overflows the frame (That’s intended and makes sense but not the behaviour I want in my case!!)

Image 2

image

I would appreciate any potential solutions to this! Thank you in advance :smiley:


#2

Is what you want to do update the size of Frame1 to contain all its children? You can do this using the changed signal on UIGridLayout’s AbsoluteContentSize property:

local scrollingFrame = script.Parent

local frame1 = scrollingFrame.Frame1
local gridLayout = frame1.UIGridLayout

local function keepSizeInSync(frame, layout)
    frame.Size = UDim2.new(1, 0, 0, layout.AbsoluteContentSize.Y)
end
grid:GetPropertyChangedSignal("AbsoluteContentSize"):connect(function()
    keepSizeInSync(frame1, gridLayout)
end)
keepSizeInSync(frame1, gridLayout)


-- You probably also want to update the scrolling frame's canvas size too:
local listLayout = scrollingFrame.UIListLayout

local function keepCanvasSizeInSync(scrollingFrame, layout)
    scrollingFrame.CanvasSize = UDim2.new(0, layout.AbsoluteContentSize.x, 0, layout.AbsoluteContentSize.y)
end
grid:GetPropertyChangedSignal("AbsoluteContentSize"):connect(function()
    keepCanvasSizeInSync(scrollingFrame, listLayout)
end)
keepCanvasSizeInSync(scrollingFrame, listLayout)

#3

Thank you!! I’ll definitely try something like that; hadn’t thought of doing that as I didn’t realise UIGridLayout had that property :smiley:
image

It’s acting very strangely at the moment though…

Edit: Because the frame is made larger, it just stretches out the UIGridLayout esentially and so makes all the imagelabels more spread out - hmmm :thinking: