Search Issue Tracker

By Design

Votes

0

Found in

2022.3.19f1

2023.2.9f1

2023.3.0b6

Issue ID

UUM-62832

Regression

No

UI Toolkit Visual Element overflows when the margin value is added

-

Reproduction steps:
1. Open the attached “UI Builder” Project
2. Open “UI Builder” Window (Window > UI Toolkit > UI Builder)
3. Select the “#root” element in the Hierarchy
4. Observe the Left and the Right margins

Expected result: The Right margin behaves like the Left one and remains inside the “#root” element
Actual result: The Right margin is created outside of the elements' border and the Left margin pushes out the Right margin, causing it to overflow

Reproducible with: 2021.3.34f1, 2022.3.19f1, 2023.2.9f1, 2023.3.0b6

Reproducible on: Windows 11
Not reproducible on: no other environment tested

  1. Resolution Note:

    The element does not overflow (ie. it matches the CSS example) if `flex-direction: row;` is added to the parent element.

    In CSS, the default value for `flex-direction` is `row`, but in Unity, the default value is `column`. This explains the initial discrepancy between CSS and Unity.

Comments (1)

  1. omar_othman

    Feb 19, 2024 13:49

    Hi, i'm talking about margin and not flex(row or column),

    Create Visual element and then give it 100% width and hight, then try to margin it from left and right side

    thank you,
    Omar Othman

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.