UIGridlayout and scrolling frame working together

Help and Feedback Scripting Support
, ,
#1

I was wondering if it is possible to use a UIGridLayout for like items in your game, so the more items you get, it will use the scrolling frame to scroll down to see more items, I was able to KINDA get this to work, but the problem it has was that the uigridlayout didn’t extend the bottom of the frame like it is supposed to.

any helpful information on how to do this would be great!

1 Like
#2

UIGridLayout only reorganises your Gui elements, it does not change the properties of a ScrollingFrame. You will have to manually code this behaviour yourself by multiplying the number of elements in your frame by a specific value (i.e. if all your buttons have a Y-height of 55, then #ScrollingFrame:GetChildren() * 55) and then set that value as the Y value of CanvasSize.

It is possible to use both though, yes.

2 Likes
#3

So I tried this and these are my results, https://gyazo.com/5fa26f06137683a2e1b620347d95d8b7
is it possible to make it so it will go down the whole object?

1 Like
#4

Use UIGridLayout’s AbsoluteContentSize feature instead. Set the ScrollingFrame’s CanvasSize to this and it shouldn’t have any blank space and takes padding into account.

9 Likes
#5

Ninja’d by above.

Oh my, excuse me. I was thinking of UIListLayout. The solution I provided you would’ve worked for UIListLayout, not UIGridLayout.

There is a AbsoluteContentSize property, with a code example that shows you what you can do to expand your ScrollingFrame to meet your grid. Try having a look.

1 Like
#6

to anyone that cant find the code sample, I was able to retrieve it using the wayback machine.

local Players = game:GetService("Players")
 
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
 
local screen = Instance.new("ScreenGui")
screen.Parent = playerGui
 
local scrollingFrame = Instance.new("ScrollingFrame")
scrollingFrame.Parent = screen
scrollingFrame.AnchorPoint = Vector2.new(0.5, 0.5)
scrollingFrame.Position = UDim2.new(0.5, 0, 0.5, 0)
scrollingFrame.Size = UDim2.new(0, 412, 0, 300)
 
local grid = Instance.new("UIGridLayout")
grid.CellPadding = UDim2.new(0, 0, 0, 0)
grid.CellSize = UDim2.new(0, 100, 0, 100)
grid.Parent = scrollingFrame
 
local function onContentSizeChanged()
	local absoluteSize = grid.AbsoluteContentSize
	scrollingFrame.CanvasSize = UDim2.new(0, absoluteSize.X, 0, absoluteSize.Y)
end
 
grid:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(onContentSizeChanged)
 
for x = 1, 10 do
	for y = 1, 4 do
		local button = Instance.new("TextButton")
		button.Text = x .. ", " .. y
		button.Parent = scrollingFrame
	end
end
#7

For what it’s worth, the reason the code sample doesn’t exist anymore is because AutomaticCanvasSize effectively replaces trying to do this on your own. It has been subject to some bugs in the past but in an ideal Roblox, you should not need to write code to change the size of the canvas to fit your elements. The property didn’t exist 6 years ago (why would you necrobump a thread from that long ago without mentioning the modern-day alternative?).

2 Likes