So I made a custom topbar and I have a frame that displays your stat. I want the frame to resize depending on all of the children in the frame but it only detects the textlabel, I want it to detect the imagelabel too. Also, the textlabel that shows how much kills you have, it won’t set the position back correctly.
Client Code:
local frame = script.Parent
local TextLabel = frame:WaitForChild("KillsLabel")
local ImageLabel = frame:WaitForChild("ImageLabel")
local BaseSize = TextLabel.Size.X
local RunService = game:GetService("RunService")
local TextService = game:GetService("TextService")
local function resizeFrameToChildren(frame)
local maxWidth = 0
for _, v in ipairs(frame:GetChildren()) do
if v:IsA("GuiObject") then
local childAbsoluteSize = v.AbsoluteSize
maxWidth = math.max(maxWidth, childAbsoluteSize.X)
end
end
frame.Size = UDim2.new(UDim.new(0, maxWidth + 30), frame.Size.Y)
end
local function ScaleTextLabel(textlabel)
local textSize = TextService:GetTextSize(textlabel.Text, textlabel.TextSize, textlabel.Font, Vector2.new(math.huge, math.huge))
local textWidth = textSize.X
if textWidth > BaseSize.Offset then
textlabel.Size = UDim2.new(0, textWidth, textlabel.Size.Y.Scale, textlabel.Size.Y.Scale)
textlabel.Position = UDim2.new(0.75, -textWidth * textlabel.Size.X.Scale, textlabel.Position.Y.Scale, textlabel.Position.Y.Scale)
else
textlabel.Size = UDim2.new(0, BaseSize.Offset, textlabel.Size.Y.Scale, textlabel.Size.Y.Scale)
textlabel.Position = UDim2.new(0.75, -BaseSize.Offset * textlabel.Size.X.Scale, textlabel.Position.Y.Scale, textlabel.Position.Y.Scale)
end
end
RunService.RenderStepped:Connect(function()
resizeFrameToChildren(frame)
end)
TextLabel:GetPropertyChangedSignal("Text"):Connect(function()
ScaleTextLabel(TextLabel)
end)
ScaleTextLabel(TextLabel)
You can use instances and properties built into Roblox Studio to accomplish this with no coding required.
The demo file below uses the AutomaticSize property combined with UiPadding and UiListLayout to achieve a result similar to the one in the screenshots you provided. It’s meant to be a reference that you can use to build your own UI off of.
The file that is downloaded when you click the download button should look like this when inserted into Roblox Studio.
Could you provide a screenshot of what your UI looks like when you change AutomaticSize to X?
Sometimes if you change the AnchorPoint property on all the children of the resizable element to 0, 0, it fixes the problem. To create blank-space on the left and right size of the content in the frame, you’re going to need to use UiPadding.
Make sure the Size property of both the image and text are not scaled. I recommend setting the x offset value of the image to the height of the image and the x offset value of the TextLabel to 0.
It’s a model, not a place. Sorry if I didn’t specify that. You can add it to your game by right-clicking StarterGui in the explorer, clicking Insert From File…, and choosing the downloaded file from the window that appears.
That’s great! Add a UiPadding object to the object named “Kills” and adjust the offset values of the PaddingLeft and PaddingRight properties to your liking.
You can learn more about it by clicking any of the links I originally provided or checking out the example model I created.
it will still appear to be in the center because the frame automatically resizes.
Though, I did further testing by changing the values of different elements and encountered the same problem as you did when the Padding property of the UiListLayout object was scaled. Try setting it to the Left and Right property values of the UiPadding object.
And remember to change the TextLabel size to 0, 0, 0, 16 to make sure there isn’t any extra space if the text’s bounds happen to be smaller than 10px.
The X axis would be 0. The y axis would still be the same. That part didn’t have to do with the issue you have right now, but it might be another issue you encounter later down the road. For example, if the player had 1 kill, the width of the character would likely be smaller than 10. It would make it appear as if there was more space on the right side of the frame than the left side of it.
To fix the issue you’ve shown in your screenshots, you should change the Padding property of the UiListLayout object to 0, 10.
Make sure to also set the PaddingRight property of the UiPadding object to the same as the PaddingLeft property value (0, 10) so there is equal blank space on the far left and far right side of the frame.
