UI Auto Length Depending On Text

This may not make sense, but basically I have a gui right here.
image

I would like the frame to automatically scale it’s self depending on the length of the text, I’ve seen it in studio before with no code required. How do I do this?

Examples:
shorter text
image

longer text
image

my gui descendants
image

if you could edit this file itd be great, if not please let me know how to create this effect!
gui.rbxm (11.7 KB)

Perosnally I would use code with this TextService | Documentation - Roblox Creator Hub
But seems you can do it without code too indeed Size modifiers and constraints | Documentation - Roblox Creator Hub
Cant help editing the file rn but if the problem still presist I could probably add it to the file another day

1 Like

There are three different visual instances here:

  • a resizeable parent frame
  • a resizable child text element
  • a statically sized child exit button

Because we know that both the parent frame and the text are able to change size in the X direction, their AutomaticSize property should be set to X, and their size should be 0 in the X direction.

We then insert a UIListLayout to make sure the exit button is on the right side of the text element (which can be achieved by having a higher LayoutOrder).

We then insert a UIPadding instance into the TextLabel, and adjust the values to get the spacing seen here:

Result:

Sample.rbxm (9.7 KB)

4 Likes

How would I work this with auto-scaling, I need to ensure that on both mobile and computer my gui is the exact same size

I’m not sure what you mean, can you elaborate?

how can i scale this for all devices but make it work as normal

AutomaticSize doesn’t really work well with the scale property, so we can use an alternative measure using UIScale.

Parent a UIScale instance to the entire screengui, then, with a script, adjust the Scale property depending on the clients resolution.

For example, if you designed your UI in 720p, if the users resolution is 1440p, the scale value will be 2 [1440 / 720 = 2].

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.