Resize frame to consistently maintain pixel spacing

Help and Feedback Scripting Support
1

I’m having trouble trying to resize a frame to maintain the same pixel padding between all elements

Just using rough code as a demo

for i = 1, 5 do
	local NewFrame = Template:Clone()
	NewFrame.Parent = Frame
		
	Frame.Size = UDim2.new(i * 0.1, -((i - 1) * 4), 0.1, 0)
	
	wait(3)
end

The templates size is {1, -8, 1, -8} and Frames size is {0, 0, 0.1, 0} and both SizeConstraint set to RelativeYY. The UIListLayout has a padding of 4 for the offset

With only 1 frame, this is the pixel padding
image
However with the full 5, it grows to 5 pixels on the left and right edges.
image
How can I maintain a consistent pixel padding across top bottom left and right, and automatically scale upon the amount of contents.

NOTE I’ve tried AbsoluteContentSize as well as UIPadding. Both didn’t help much with a solution. This is the closest I’ve gotten.

NOTE 2 Please don’t tell me 1 pixel doesn’t really matter, because yes, it does :upside_down_face:

2

Assuming the frames won’t change size, then you can do some simple math to accomplish this, but, you will have to set the anchor point to 0, 0.5:

Frame.Size = UDim2.new(i * 0.1, 5 + i * 5, 0.1, 0)

Alternatively, you can set the dominant axis to the y axis(and make the x alignment to center). Change the UIListLayout to UIGridLayout and set the CellSize property to 0, 100, 1, 0. lastly, put a UISizeConstraint as a child of the UIGridLayout and this should resize your UI.

3

Doesn’t seem to work :confused: Edges have huge padding

image
image1920×1080 365 KB

EDIT
Some more testing and I’m getting close
image
with this code

for i = 1, 5 do
	local NewFrame = Template:Clone()
	NewFrame.Parent = Frame

	local TotalFrames = NewFrame.AbsoluteSize.Y* i
	local Padding = (i - 1) * ListLayout.Padding.Offset
	local EdgePadding = 2 * ListLayout.Padding.Offset
	
	Frame.Size = UDim2.new(0, TotalFrames + Padding + EdgePadding, 0.1, 0)
	
	wait(5)
end

Not sure how it’s getting 5 pixel padding then 4 pixel padding tho? The UIlistLayout Padding Offset is set to 4

4

I had a typo in there, I meant i * 5 - 5, not 5 + 1 * 5:

Frame.Size = UDim2.new(i * 0.1, i * 5 - 5, 0.1, 0)

You can also try using the AbsoluteSize instead of scale, so it’s 100% offset. Although it won’t scale if you resize your window(but it really doesn’t matter, who resizes their window anyway?).

It might help if you showed me the hierarchy of your GUI, so I can understand it’s components.

5

That still didn’t work :confused:
30 characters

6

Hierachy

image
image1920×1080 682 KB

7

Let’s go with the offset approach. So, you would get the absolute Y size(meaning the size in pixles for the Y axis), and copy it onto the X:

Frame.Size = UDim2.new(0, Template.AbsoluteSize.Y + 5 + i * 5, 0.1, 0)