UIGridLayout items are invisible

Help and Feedback Scripting Support
#1

I am building an inventory system. In my LocalScript, I am able to create an ImageButton for each item that I want to populate in the GUI.

-- This is a ScrollingFrame
local item_list_frame = inventory_frame.ItemListFrame

-- This is a UIGridLayout
local ITEM_GRID = item_list_frame.ITEM_GRID

-- Populate the inventory GUI using data from the server side.
local function PopulateInventory()
	-- Reset the inventory GUI
	ITEM_GRID:ClearAllChildren()
	
	-- Get the inventory metadata from the server.
	local inventory_data = PopulateInventoryGui:InvokeServer()
	
	-- Add each item to the UIGridLayout
	for index, item in ipairs(inventory_data) do
		local item_thumbnail = Instance.new("ImageButton")
		item_thumbnail.BackgroundTransparency = 1
		item_thumbnail.Image = ("rbxassetid://"..item.display_image_asset_id)
		item_thumbnail.Name = item.display_name
        item_thumbnail.Parent = ITEM_GRID
	end
	
end

The code seems to work as expected, because when I print the children of the UIGridLayout, it shows that all the ImageButtons are populated.

print(ITEM_GRID:GetChildren())

image

image

The problem is, all these ImageButtons are invisible when they are a child of the ITEM_GRID. If I use the Explorer and drag them into the ItemListFrame, they become visible.

image
image1450×739 40.5 KB

image

What am I doing wrong here? Is there something I need to change about my GUI layout? How can I get the UIGridLayout to show up inside of the ScrollingFrame?

1 Like
#2

The layout needs to be placed inside the holding frame and alongside the other items you want to make grid items. Move your ImageButtons out of the UIGridLayout and into ItemListFrame.

item_thumbnail.Parent = item_list_frame
2 Likes
#3

This is exactly what I was looking for. Here is my updated code:

-- Populate the inventory GUI using data from the server side.
local function PopulateInventory()
	-- Reset the inventory GUI
	ITEM_GRID.Parent = nil
	item_list_frame:ClearAllChildren()
	ITEM_GRID.Parent = item_list_frame
	
	-- Get the inventory metadata from the server.
	local inventory_data = PopulateInventoryGui:InvokeServer()
	
	-- Add each item to the UIGridLayout
	for index, item in ipairs(inventory_data) do
		local item_thumbnail = Instance.new("ImageButton")
		item_thumbnail.Parent = item_list_frame
		item_thumbnail.BackgroundTransparency = 1
		item_thumbnail.Image = ("rbxassetid://"..item.display_image_asset_id)
		item_thumbnail.Name = item.display_name
	end
	
end