Search Issue Tracker

By Design

Votes

0

Found in

2022.3.60f1

6000.0.43f1

6000.1.0b11

6000.2.0a7

Issue ID

UUM-100396

Regression

No

UI Toolkit Label height is incorrectly calculated when using max-width with percentage value

-

Reproduction steps:
1. Open the attached “IN-97352.zip” project
2. Open “NewUXMLTemplate.uxml” from the Project window (Assets > Label Repro)
3. Observe the Label with the red background in the UI Builder

Expected result: The text does not overflow from the container and looks like the Label with the green background
Actual result: The text overflows from the Label container

Reproducible with: 2022.1.0a1, 2022.3.60f1, 6000.0.43f1, 6000.1.0b11, 6000.2.0a7

Reproducible on: Windows 11, macOS 15.3 (M1 Pro)
Not reproducible on: no other environment tested

  1. Resolution Note:

    To use % heights in CSS, the parent element must have an explicitly defined height, or a % height that can be traced back through parents to a defined height, or something else specifying the size, such as a sibling.

    In this case the size of the parent is auto, and depend on the size of it's only children. This is an undefined situation that the standard is trying to address.

    Since the of the parent is unknown when calculating the flex-basis of the children, the algorithm ignores it. The mathematically correct solution would be having element of 0 or infinite size in most of theses cases, so most browser simply ignored the value. The min/max constraint are still applied afterward with the result that the text overflow.

    The builder did seems to suggest the uxml has a definite size but when looking at the debugger the underlying asset is still Auto/Auto. This will be brought to the UI debugger team to see if there is some improvement that could be done on this regard.

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.