Scripting Helpers is winding down operations and is now read-only. More info→
Ad
Log in to vote
1

How would I place one TextLabel under another?

Asked by
Qwerty_8339 12
2 years ago

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?

1 answer

Log in to vote
0
Answered by
loowa_yawn 383 Moderation Voter
2 years ago
Edited 2 years ago

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:

a)

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)

Ad

Answer this question