How to have list objects perfectly aligned within a frame

Help and Feedback Art Design Support
#1

Hi, I am wondering how to get images in this case to be perfectly aligned within a frame and scale down in size, while keeping their padding.

I want these 4 labels to scale down in size, but keep the padding and not extend outside the frame.

image
image1356Ă—533 528 KB

What it should maintain:

image
image603Ă—513 207 KB

What happens:
https://i.gyazo.com/16f047e723e3c41d9c90038f91d56096.mp4

Edit: Group Information.rbxm (6.4 KB)

#2

Table layout is doing what I want, but it’s manipulating all children so text scale is not bound by the size and position I set the text frame at.

image
image1295Ă—537 416 KB

#3

From what you’re trying to accomplish, I think your best bet is to use UIGridLayout, as that automatically maintains the size and position of any children objects in the GUI.

I recommend playing around with the CellPadding and FillDirection variables if you intend on using UIGridLayout.

Hope this helps!

#4

The UIGridLayout wouldn’t scale, though. It’d just end up creating more horizontal rows, and the buttons would never scale down with the parent frame (if you aren’t using scale in their size).

@Blue101black I’m not sure what exactly your text issue is, could you explain it a bit further?

1 Like
#5

UIListLayout is the tool for the job here. What are your settings for the UIListLayout’s Padding property? How about the child text boxes’ Size?

1 Like
#6

So the text is the same size as image label it’s inside, even though I’ve given some offsets.

image
image1344Ă—611 648 KB

@blobbyblob Text size above, padding below.

image
image1172Ă—488 397 KB

The frame that everything should be contained in. @EmeraldSlash text should look more like that.
image

#7

Here is the UI: Group Information.rbxm (6.4 KB)

#8

I think I fixed it just by putting in a UITableLayout. Didn’t need to change anything else, although just to improve the text space available I halved the horizontal text padding from 32 to 16.

Group Information.rbxm (6.5 KB)

3 Likes
#9

Thanks a lot! Yeah, I wasn’t putting the buttons in another frame, that seems to do it. Well done :slight_smile:

1 Like
#10

Oh yeah, the UITableLayout is pretty confusing. Best to read up on constraints before you use them, I guess.

1 Like
#11

When scalling and position texts, images, frames, etc… Use ONLY Scale and 0 on Offset. It can allow you to scale perfectly and you should not get this problem! If you have problems when correctly scalling, use plugin AutoScale GUI https://www.roblox.com/library/1496745047/AutoScale-GUI

I hope it help you!

#12

The issue was solved over a year ago. Also, there is a time and a place to use both scale and offset.

#13

For anyone who does not want to use a UITableLayout here is how you can do it with UIListLayout

local outerPadding = 16
local innerPadding = 8

-- create a window frame
local window = Instance.new("Frame")
window.Size = UDim2.new(0, 300, 0, 200) -- any size you like

-- give the window a outer padding (OPTIONAL)
local padding = Instance.new("UIPadding")
padding.PaddingTop = UDim.new(0, outerPadding)
padding.PaddingBottom = UDim.new(0, outerPadding)
padding.PaddingLeft = UDim.new(0, outerPadding)
padding.PaddingRight = UDim.new(0, outerPadding)
padding.Parent = window

-- create a row frame (its important that we set offset to padding)
local row = Instance.new("Frame")
row.Size = UDim2.new(1, innerPadding, 0, 36)
row.BackgroundTransparency = 1
row.Parent = window

-- create List Layout with the padding we want and parent to row
local layout = Instance.new("UIListLayout")
layout.FillDirection = Enum.FillDirection.Horizontal
layout.Padding = UDim.new(0, innerPadding)
layout.Parent = row

-- lets now make the columns
local columnAmount = 3
local scaleX = 1 / columnAmount -- 0.333
for index = 1, columnAmount do
	local button = Instance.new("TextButton")
	-- its important that we subtract padding from the size
	button.Size = UDim2.new(scaleX, -innerPadding, 1, 0)
	button.Parent = row
end

image

While iv shows you how to do it in Lua its possible to do directly within studio you just have to workout scaleX 1 / columnAmount

1 column = 1
2 column = 0.5
3 column = 0.333
4 column = 0.25
5 column = 0.2

1 Like