Help with resizing frame based on it's children

Right now, the resizing is very off.

local function AutoSizeFrame()
	local totalWidth = 0

	for i,v in ipairs(frame:GetChildren()) do
		if v:IsA("TextLabel") or v:IsA("ImageLabel") then
			local childAbsolutePosition = v.AbsolutePosition
			local childAbsoluteSize = v.AbsoluteSize
			local rightX = childAbsolutePosition.X + childAbsoluteSize.X
			totalWidth = math.max(totalWidth, rightX)
		end
	end
	
	frame.Size = UDim2.new(UDim.new(0, totalWidth), frame.Size.Y)
end

I want to resize on the offset not the scale.

Is there a reason you dont use Scale? Or is this for testing? because scale pretty much does this but you dont have to script it

I agree with this, if you however want to keep the y value the same as the roblox button you can just keep the y value to an offset then use scale for x value. if you want the child to follow the parent size you should use scale because it will scale based on parent

1 Like

You sure this isn’t a studio thing? It tends to scuff how people see UI as it’s usually refitted in certain places to make up for the fact that studio itself has loads of menus, when the roblox client itself only has a few buttons.

I’m trying to make a custom topbar so it needs to be offset. I’m also using UIListLayout so thats probably why the size is wrong.

You don’t need code, Roblox can do this if you set up your UI’s using automaticsize.

I converted it to code, so you can just use this to generate what you see on the video.

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "ScreenGui"
screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling

local frame = Instance.new("Frame")
frame.Name = "Frame"
frame.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
frame.BorderColor3 = Color3.fromRGB(0, 0, 0)
frame.BorderSizePixel = 0
frame.Size = UDim2.new(1, 0, 0, 30)

local uIListLayout = Instance.new("UIListLayout")
uIListLayout.Name = "UIListLayout"
uIListLayout.FillDirection = Enum.FillDirection.Horizontal
uIListLayout.SortOrder = Enum.SortOrder.LayoutOrder
uIListLayout.Parent = frame

local frame1 = Instance.new("Frame")
frame1.Name = "Frame"
frame1.AutomaticSize = Enum.AutomaticSize.XY
frame1.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
frame1.BorderColor3 = Color3.fromRGB(0, 0, 0)
frame1.BorderSizePixel = 0
frame1.Size = UDim2.new(0, 100, 1, 0)
frame1.Parent = frame

local frame2 = Instance.new("Frame")
frame2.Name = "Frame"
frame2.BackgroundColor3 = Color3.fromRGB(255, 48, 33)
frame2.BorderColor3 = Color3.fromRGB(0, 0, 0)
frame2.BorderSizePixel = 0
frame2.Size = UDim2.new(0, 300, 1, 0)
frame2.Parent = frame

local frame3 = Instance.new("Frame")
frame3.Name = "Frame"
frame3.BackgroundColor3 = Color3.fromRGB(178, 255, 35)
frame3.BorderColor3 = Color3.fromRGB(0, 0, 0)
frame3.BorderSizePixel = 0
frame3.Size = UDim2.fromScale(1, 1)
frame3.Parent = frame

frame.Parent = screenGui
1 Like

The problem is that the children would scale with it too.

I tried this:

RunService.RenderStepped:Connect(function()
	ImageLabel.Size = UDim2.new(0.435, 0,0.711, 0)
	ImageLabel.Position = UDim2.new(0.128, 0,0.162, 0)
end)

but doesn’t seem to work.

The children can stay, again you really don’t need to code here.

But what if you have to scale the frame with childrens inside it?
image

local function resizeFrameToChildren(frame)
	local maxWidth = 0

	for i, v in ipairs(frame:GetChildren()) do
		if v:IsA("GuiBase2d") then
			local childAbsoluteSize = v.AbsoluteSize
			maxWidth = math.max(maxWidth, childAbsoluteSize.X)
		end
	end

	frame.Size = UDim2.new(UDim.new(0, maxWidth), frame.Size.Y)
end