Search Issue Tracker

By Design



Found in [Package]


Issue ID




[UI Toolkit] VisualElement takes up space when the container has its position set to Absolute

Package: UI Toolkit


How to reproduce:
1. Download the attached project "UIToolkit"
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)

  1. 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.

Add comment

Log in to post comment

All about bugs

View bugs we have successfully reproduced, and vote for the bugs you want to see fixed most urgently.