Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Resolved Child element doesn't fill Parent's size with padding

Discussion in 'UI Toolkit' started by RunninglVlan, Jul 7, 2021.

  1. RunninglVlan

    RunninglVlan

    Joined:
    Nov 6, 2018
    Posts:
    182
    I want to make an overlay over the VisualElement that has a padding, but it is ignored in child element, which makes it smaller.
    Code (CSharp):
    1. // UXML
    2. <ui:VisualElement class="parent">
    3.     <ui:VisualElement class="child" />
    4. </ui:VisualElement>
    5.  
    6. // USS
    7. .parent {
    8.     width: 200px;
    9.     height: 200px;
    10.     background-color: blue;
    11.     padding: 20px; /* This is in the right example below */
    12. }
    13.  
    14. .child {
    15.     position: absolute;
    16.     width: 100%;
    17.     height: 100%;
    18.     background-color: red;
    19.     opacity: 0.6;
    20. }
    upload_2021-7-7_16-32-7.png
    Here's how it renders in browser:
    upload_2021-7-7_16-38-15.png
    As I checked padding increases size of the element in browser, but not in Unity. If it's expected, how can I accomplish my goal? (In reality parent has dynamic size)
     
    Last edited: Jul 7, 2021
  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi RunninglVlan,

    The reason for this is the box-sizing property. UI Toolkit use a box-sizing of border-box by default which makes the size of an element include border and padding. The web use content-box by default. You can find more information here.
     
    Nexer8 likes this.
  3. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    An easy way to do it is to consider the padding when you set the size of the parent element.
     
  4. RunninglVlan

    RunninglVlan

    Joined:
    Nov 6, 2018
    Posts:
    182
    Alright, but if I set
    box-sizing: border-box
    in browser it still renders as expected. (Child is the same size with or without padding on a parent)
    upload_2021-7-7_17-51-29.png
    BTW, do you plan on supporting
    box-sizing
    property?
     
    Last edited: Jul 7, 2021
  5. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    The screenshots are not really helpful at understanding what you are expecting so I'm not entirely sure what you want to accomplish here.

    I made a small jsfiddle based on your example and I am getting a different result : https://jsfiddle.net/jks4pub8/1/

    I also tested in UI Toolkit and the padding is ignored when the child has absolute position. It should behave the same as on the web... I believe this is a bug in the layout and I will investigate more.
     
  6. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    The layout library we are using is Yoga from Facebook which only support a box-sizing of border-box and we do not have any plan to add support for content-box.
     
    RunninglVlan likes this.
  7. RunninglVlan

    RunninglVlan

    Joined:
    Nov 6, 2018
    Posts:
    182
    Adding
    top: 0; left: 0;
    to .child produces my result.
     
  8. collin_unity170

    collin_unity170

    Joined:
    Nov 1, 2023
    Posts:
    2
    I can confirm this bug is affecting me as well - it appears to be an issue in yoga layout as it repro's here: https://yogalayout.com/

    Click on the "2" element and change it's position to absolute from the layout tab with top 100%, you'll see it still overlaps the container as it doesn't account for the 20px padding.

    Ah, it looks like there is an open bug for this: https://github.com/facebook/yoga/issues/1436