How would I place one TextLabel under another?

I've been trying to create a gui that creates a new TextLabel, puts it in a ScrollingFrame, and place one under the other. But when the text in a label spans multiple lines, and the label size becomes larger, they will overlap.

I was told in a previous question that the reason for the overlap is because I have a set number for the Y offset. Right now the way I have my code set up, it will always set the Y offset to x15 of whatever the last previous line was.

label.Position = UDim2.new(0, 5, 0, (#ScrollingFrame:GetChildren() * 15))

And that code works, but only if the size of the label is just a single line long.

How would I be able to find the Y offset I need?

AnonymousSep 26, 2022

✓ Accepted answer

Hi!

From the top of my head, I can think of two ways of getting the desired offset you need.

Calculating all the GuiObject's Y components
Using a UIListLayout inside your ScrollingFrame

an example for the both of them would be:

local ScrollingFrame = script.Parent.ScrollingFrame

local function getYOffset()
	local Offset = 0
	for __index, object in ipairs(ScrollingFrame:GetChildren()) do
		if object:IsA('GuiObject') then
			Offset += object.Size.Y.Offset
		end
	end
	return Offset
end

-- call the 'getYOffset' function to retrieve the height of the content, then add the new element's Y offset to that number

b) a UIListLayout is defined in the documentation:

A UIListLayout lays out sibling UI elements in a single row within the parent UI element, either horizontally or vertically.

A quick rundown of the useful properties:

Padding [UDim]: Determines the amount of free space between each element.
AbsoluteContentSize [Vector2]: The absolute size of space being taken up by the grid layout.
FillDirection [FillDirection]: Determines the axis in which UI elements are laid out.
HorizontalAlignment [HorizontalAlignment]: Determines the horizontal alignment of UI elements within the parent element.
VerticalAlignment [VerticalAlignment]: Determines the vertical alignment of UI elements within the parent element.
SortOrder [SortOrder]: Determines the manner in which the next UI element is chosen when being laid out.

Here I will provide an example of UIListLayout in action, with transparent objects to show no overlapping. (i haven't edited any of the properties in the UIListLayout)

AnonymousSep 26, 2022Edited Sep 26, 2022Permalink

How would I place one TextLabel under another?

1 answer