You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**Auto Size:** This automatically adjusts the font size of the text to fit the space
98
-
available within the widget boundaries. It ensures that the text remains legible without overflowing its container, making it especially handy for responsive designs where the display may vary across different devices.
97
+
-**Auto Size**
98
+
99
+
The `Auto Size` option allows the `Text` widget to automatically reduce its font size to fit within its parent widget. This ensures that the text remains legible without overflowing its container, making it especially handy for responsive designs where the display may vary across different devices.
100
+
101
+
- **Configure Parent Widget Dimensions**
102
+
103
+
To enable `Auto Size`, the `Text` widget must be inside a widget that has both defined width and height. Without these constraints, the font size cannot be adjusted automatically.
104
+
105
+
1. Select the `Text` widget.
106
+
2. Check its parent widget.
107
+
3. Ensure both width and height are explicitly defined.
108
+
109
+
:::warning
110
+
Without defined dimensions, the `Auto Size` feature may not behave as expected.
111
+
:::
112
+
113
+
- **Behavior Scenarios**
114
+
115
+
The following examples illustrate how `Auto Size` behaves under different container configurations:
116
+
117
+
- Container with width set to `infinity` and height set to `100px`, `Auto Size` disabled. The text may overflow beyond the container.
118
+
- Container with width set to `infinity` and height set to `100px`, `Auto Size` enabled. The font size adjusts to fit the defined height.
119
+
- Container with width set to `30%` and no height defined, `Auto Size` enabled. The feature has no visible effect due to missing height constraint.
120
+
- Container with width set to `70%` and height set to `50px`, `Auto Size` enabled. The text is resized to the minimum allowed font size to remain within the container.
Use `Auto Size` with percentage-based dimensions for better responsiveness. For example, set the container width to `30%` and enable `Auto Size` to allow the text size to adjust as the screen size changes.
126
+
:::
127
+
128
+
:::note
129
+
The `Auto Size` feature has a minimum font size threshold. If the container becomes too small, text may clip or overflow when resizing is no longer possible.
0 commit comments