Automatic Size Property: Now Available

What is Automatic Size?

Automatic Size is a property that can be applied to any UI object. It is used to automatically size parent UI objects based on the size of its descendants. By applying this property, you can dynamically add text and other content to a UI object at edit or run time, and the size will adjust to fit that content. Automatic Size is particularly useful for UI that’s driven by dynamic content.

Documentation

For additional details on how to use AutomaticSize with your UI, please visit the following Dev Hub pages:

Property and Values

With Automatic Size, all GuiObjects have a new Enum property named AutomaticSize. This property can have the following values:

Property Value Description
None Default sizing behavior
X Resize along the X axis to fit child content
Y Resize along the Y axis to fit child content
XY Resize along both the X and Y axes to fit child content

Basic Examples

A TextLabel whose AutomaticSize property is ‘X’:
devForumPost_autosizeX_00

A TextLabel whose AutomaticSize property is ‘Y’ (and TextWrapped enabled):
devForumPost_autosizeY_00

Known Issues

The following issues occur regardless of whether Automatic Size is being used:

  1. In some games, resizing the window can cause UI elements to overlap each other.
  2. ScrollingFrames containing UIGridLayouts affected by UIAspectRatioConstraints will cause elements to display incorrectly.

When using Automatic Size, we are aware of the following issues :

  1. AutomaticCanvasSize incorrectly sizes canvas with scaled child positions.
  2. Automatically sized parent may not respect child size constraints.
  3. Automatically sized parent of a ScrollingFrame with AutomaticCanvasSize may resize incorrectly
  4. Automatically sized elements may overflow their parent bounds
  5. Scaled text with automatic size doesn’t respect UIPadding
  6. AutomaticCanvasSize doesn’t respect UIPadding of UIGridLayout
  7. Inset and middle borders are incorrectly accounted for in automatic size
  8. Automatically sized parents with scaled size and scaled-sized children are incorrectly resized

Please report any issues that you find, along with general feedback, as a reply to this post and we will add new issues to the list.

Thanks

BIG thanks to everyone who participated in the Automatic Size studio beta! Your participation, feedback, and bug reports helped immensely.

408 Likes

This topic was automatically opened after 16 minutes.

This is a pretty cool update. I’ve been looking for something like this. Glad to see it finally implimented. What happens if your automaticsize axis is X though, and you enable text wrapping?

31 Likes

I wasn’t even aware this existed as a Beta feauture until now. Now that is is available for public games, this will be a great developer OCD fix for UI design and ratio scaling for all devices. This property makes good use of custom inventory systems, and text in boxes as shown in the example

Unfortunate to see that scaled text doesn’t support UIPadding is an issue, but oh well. Seeing as this property has an XY property value as an option, can this conflict with UIAspectRatioConstraints. The known issues say child objects of automatically sized parents can conflict with SizeConstraints, but what about ratio scale?

19 Likes

As a UI designer, I love to see a step in the right path to help us make our UI accessible to everyone, despite their device’s dimensions. Thank you for this update.

16 Likes

To all the translators out there, know that this will help immensely! Text would often not fit UI- this fixes the issue. Automatic size is a godsend! Thank you so much!

9 Likes

Woot woot :partying_face: !
Great job on this update but I’m a little confused about whether automatic size property is a property or something that has to be scripter(wait, stupid question, lol) this is going to make UI a lot easier,

11 Likes

It appears to be a GuiObject you add in to your object, similar to UICorner or any constraint.

Source: UI Automatic Size

8 Likes

It’s a property of a GuiObject, if I’m not wrong here. You can see the property image in the same article you linked.

6 Likes

My admin panel is going to look so much better with this incorparated.
This is actually an update I’ve been looking forward to for a really long time
Nice job :+1:

8 Likes

Oh your right, I see now. Thank you.

5 Likes

I’ve been using this for production inside of some of my games as it’s a helpful feature rather than making a module or script to behave the same as Automatic Size, some of my projects and upcoming games with best friends of mine use this and will be helpful when I release them with testers and users.

Althought, when can we expect some of the issues to be fixed or “cleared out”, seems like these issues might affect some of my games or other games developers have made. :thinking:

Finally after a long wait, it’s here…

6 Likes

Is it possible to increase the size in the y axis just a little bit more(relative to text size)? It seems off. In addition, are there going to be properties where you can set how much space the padding should be? For example:
image


But, this is a great feature!

9 Likes

Amazing feature! I found myself thinking about how to approach this problem just the other day but it would seem that there is now a solution! Great step forward in improving user experience.

6 Likes

Can you also document this on the DevHub?

15 Likes

In my opinion this will make guis way easier to make. sure the old way to make guis was still easy, but this will make them way easier. I just hope that the size of the characters are affected to. I was not happy to size those up. As it took what I planed to take less then a minute, take 2 minutes cause I realize that I forgot where the size is and just- what i’m trying to say is that its a good update.

7 Likes

Hi @BazementBoyz - we’re aware of one issue with ScrollingFrame where UIAspectRatioConstraint isn’t working correctly. We’ll keep the list of known issues updates and as accurate as possible as we investigate the issues. Thanks!

10 Likes

Hi @Conmmander - good question! The object will resize along the X axis until the maximum extent is reached (parent’s max size). Once the object fully resizes along the axis, then the text should start wrapping.

10 Likes

Hi @loueque - please let me know if there are any issues in particular that you would like prioritized first! Thanks for trying out the beta, much appreciated!

9 Likes

Hi @TOP_Crundee123 - this can be resolved with UIPadding :smiley:

11 Likes