UIListLayout: how to add Padding depending on LayoutOrder

Help and Feedback Art Design Support
,
#1

Basically what I am trying to reach is on this image:
image

It was done by hands, but I want to enable/disable some objects of the GUI and that’s why I have to use UIListLayout, but if I add it - there’s no method I could find for each object to have padding that depends on their place in the list. That’s the result I have right now:

image
image409×503 58.5 KB

Padding element doesn’t have an option for just one object and if I put it inside the ImageButton - it just moves the text in it. UIListLayout doesn’t seem to have such properties as well. Would be grateful for any suggestions!

Structure:
image

#2

Yeah they don’t really have a built-in method to do it easily but I was able to achieve it still.

{B2ACA097-9298-4BCB-B9D2-718D1F81BF67}
{B2ACA097-9298-4BCB-B9D2-718D1F81BF67}434×508 78.8 KB

Basically you’ve got the mainframe with the vertical UIListLayout then inside that have fake frames (or filler frames) whatever you wanna call them. They’ll basically just be the holder of your actual button.

Your actual button you can just offset the position by what you want, so like 24-48-72 etc.
Its a hacky method but it works.

Idea.rbxm (3.5 KB)

1 Like
#3

Thank you! I even already found a solution just by scripting it lol

Basically I just place all objects in one position, give them special attribute called “Place”(based on position I want them in the layout) and make a list of objects depending on it. Then it just positions them in place with offset

local frame = script.Parent

local buttons = {}

for _, v in ipairs(frame:GetChildren()) do
	if v:IsA("ImageButton") and v.Visible then
		local place = v:GetAttribute("Place")
		if place then
			table.insert(buttons, {object = v, place = place})
		end
	end
end

table.sort(buttons, function(a, b)
	return a.place < b.place
end)

local yPadding = 0.189
local xPadding = 0.025

for _, item in ipairs(buttons) do
	--if item.place == 0 then continue end
	local button = item.object
	button.Position = button.Position + UDim2.new(xPadding * item.place, 0, yPadding * item.place, 0)
end
1 Like