Search Issue Tracker
By Design
Votes
0
Found in [Package]
1.0.0-preview.18
Issue ID
1383229
Regression
No
[UI Toolkit] VisualElement takes up space when the container has its position set to Absolute
How to reproduce:
1. Download the attached project "UIToolkit Bug.zip"
2. Open UI Builder window (in Menu bar click Window > UI Toolkit > UI Builder)
3. Observe UI Builder viewport before and after doing step 4
4. In UI Builder Hierarchy, delete #animated-rainbow-crown-icon VisualElement (the path is #wrap/#stats-menu-container/#outline/#middle/#page-masks/#page-0/#top-panel-section/#panel-container-right/#achievements-container/#icons-numbers/#stat-icons/#rainbow-crown-icon/#animated-rainbow-crown-icon)
Expected result: The layout of elements in the viewport does not change
Actual result: The layout of elements in the viewport changes
Reproducible with: 1.0.0-preview.15 (2020.3.27f1), 1.0.0-preview.18 (2020.3.27f1, 2021.2.10f1, 2022.1.0b6, 2022.2.0a4)
Could not test with: 2019.4.35f1 (UI Toolkit is not available), 1.0.0-preview.14 (2020.3.27f1) (compile errors)
Add comment
All about bugs
View bugs we have successfully reproduced, and vote for the bugs you want to see fixed most urgently.
Latest issues
- Rigidbody2D.Slide API does not have the needed configuration when creating a 2D Top-Down character controller
- Opening reference for "Playables"component redirects to a missing page
- Sprite Renderer image is changed when switching Mask Interaction and changing Sprite to a shared Sprite
- An unsigned integer is not compared with an integer correctly in player when using IL2CPP backend
- Graphical artifacts are being rendered in Scenes that are loaded during run-time when GPU Resident Drawer is turned on
Resolution Note:
This issue showcases a fundamental aspect of the layout engine used by UIToolkit. Size constraints on element can come from uss style values or come by calculated size of children.
Some elements will internally provide measurements to the layout engine. This is the case for TextElement and Image. There is however a limitation where only leaf elements in the hierarchy can provide such capabilities. A TextElement by itself will inform the layout engine of its preferred size according to the displayed text and the font configuration. However, as soon as this element is no longer a leaf element, then this measurement no longer influences the layout and its size is only driven by direct style values (like width, min-height, etc) or by the layout of its children.
The way to workaround this issue is to wrap your Label inside a parent and place the absolute child as a sibling or that element, this way both are leaf elements and the Label text measurement can properly affect its size. Callbacks can be registered on the parent rather than on the label if that`s needed.