Search Issue Tracker
Won't Fix
Won't Fix in 2023.1.X
Votes
0
Found in
2021.3.15f1
2022.1.23f1
2022.2.0f1
2023.1.0a21
Issue ID
UUM-20768
Regression
No
UI Toolkit ListView can cause the layout to overlap when there are children of elements preceding it
How to reproduce:
- Open the attached project "UiTest.zip"
- Enter Play Mode
- Click the "Add Data" button in the Game view
Expected results: Layout does not overlap
Actual results: Layout overlaps
Reproducible with: 2021.3.15f1, 2022.1.23f1, 2022.2.0f1, 2023.1.0a21
Could not test with: 2020.3.42f1 (errors in the Console window)
Reproducible on: Windows 10
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
- Required SpriteMask class (ID 331) is stripped when "Strip Engine Code" is enabled
- “Maximized serialized file backup not found” error is thrown when minimizing a window in a newly opened project
- Build stack trace contains invalid lines when building with IL2CPP using scripts with delegates containing generic types in the signature
- Entities Systems window has a “Show Full Player Loop” dropdown which does nothing when clicked after enabling “Show Full Player Loop”
- Entities Hierarchy Search “Show/Hide” button’s Lens Icon is blurry when the Editor is on an external monitor
Resolution Note:
The overlap happens because the visual element containing the label has a computed flex-shrink of 1 and a computed overflow of visible.
The flex-shrink being at 1 means that the element containing the label can shrink. In this case, both the ListView and the element containing the label have flex-shrink set to 1, so after the "initial" space is calculated, both will be shrunk in equal measures to fit the available space.
The overlap happens because the overflow of the element containing the label is set to visible. If you switch it to overflow, you should see that it is not overlapping anymore.
To ensure that the label is always visible, you can set the flex-shrink on the parent to 0, which will ensure that its size will be computed by its children.
Resolution Note (2023.1.X):
The overlap happens because the visual element containing the label has a computed flex-shrink of 1 and a computed overflow of visible.
The flex-shrink being at 1 means that the element containing the label can shrink. In this case, both the ListView and the element containing the label have flex-shrink set to 1, so after the "initial" space is calculated, both will be shrunk in equal measures to fit the available space.
The overlap happens because the overflow of the element containing the label is set to visible. If you switch it to overflow, you should see that it is not overlapping anymore.
To ensure that the label is always visible, you can set the flex-shrink on the parent to 0, which will ensure that its size will be computed by its children.