PcoWSkbVqDnWTu_dm2ix

UI Automatic Size

UI Automatic Size

10 min

The AutomaticSize property automatically resizes a parent UI object to the size of its descendants. By applying this property, you can dynamically add content and the parent’s size will adjust to fit that content.

TextLabel with AutomaticSize property of X
TextLabel with AutomaticSize property of Y and TextLabel/TextWrapped|TextWrapped enabled
Parent Frame (grey) with AutomaticSize property of XY containing a child frame (yellow) with animating position

Usage Cases

Automatic sizing can be used in many ways, including:

Case Example Usage
Localized Text Expand a UI object to fit text that has been articles/Introduction to Localization on Roblox|localized in many languages.
User Input Allow the player to articles/introduction to input#text-input|input text within a UI object, automatically adjusting its size based on the amount of text entered.
Dynamic Layouts UIListLayout that automatically resizes based on the items in the list.
Scrolling Frames Automatically resize the ScrollingFrame/CanvasSize|CanvasSize of a ScrollingFrame based on its content.
Rich Text Automatically adjust the size of text objects using articles/gui rich text|rich text markup, including font type and size.

Setup / Behavior

GuiObject/AutomaticSize|AutomaticSize is available on any GuiObject. To configure it, select the object and choose an option for the AutomaticSize property.

Sizing Direction

Automatic sizing can be configured for specific control over which direction(s) the UI object will resize to fit the content.

Setting Direction(s)
X Horizontal
Y Vertical
XY Horizontal + Vertical

Anchor Point

Just as when you’re regularly sizing an object, automatic sizing will take the anchor point into consideration. Compare the following three automatically-sized text labels:

From top to bottom, GuiObject/AnchorPoint|AnchorPoint of 0, 0.5 (left), 0.5, 0.5 (center), and 1.0, 0.5 (right)

Minimum Size

When automatic sizing is applied to an object, its minimum size is controlled by the object’s GuiObject/Size|Size property, meaning the parent object won’t be resized smaller than its size along any axis.

Parent frame (white) with X size of 0 and therefore no minimum width
Parent frame (white) with X size of 100

Text Wrapping

When a text object has the TextLabel/TextWrapped|TextWrapped property enabled and an AutomaticSize setting of Y or XY, the label will resize to accommodate text that wraps across multiple lines.

TextLabel with AutomaticSize property of Y and TextLabel/TextWrapped|TextWrapped enabled

Text Scaling

Instead of enabling the TextScaled property for text objects, it’s recommended that you use AutomaticSize. For more details, see the TextLabel/TextScaled, TextButton/TextScaled, or TextBox/TextScaled documentation.

Script Example

The following script creates an automatically-sized parent frame with a UIListLayout, then it inserts several automatically-sized TextLabel objects. Note how the parent UIListLayout automatically resizes to fit its child content and the labels automatically resize to fit their text content. This script should be parented to a ScreenGui.​

Performance Considerations

TextLabel, TextButton, and TextBox objects are more expensive to calculate when they are automatically sized because the text bounds must be calculated using the maximum available space determined by automatic size. This functionality is optimized for performance, but be deliberate in your use of the GuiObject/AutomaticSize|AutomaticSize setting on text objects.

Other than text objects, automatically-sized objects perform about equally with their non-automatically-sized counterparts.


Tags:
  • gui
  • resize
  • size
  • cross-platform