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