Box model seems to differ from the manual

I am using Unity 2020.1.0b4 with UI Builder 0.10.2.

5676118--591793--box-model.png

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement style="flex-grow: 1;
flex-direction: row;
">
        <Style src="NewUI.uss" />
        <ui:VisualElement style="flex-grow: 1;
" />
        <ui:VisualElement style="flex-grow: 1;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
" />
    </ui:VisualElement>
</ui:UXML>

According to your manual, “A” should be the same length as “B” but it is not. “A” is equal to the width of the blue rectangle, and i think that’s a bad idea. And mozilla does so too:

Note: It is often useful to set box-sizing to border-box to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desireable.

Btw, yoga does it also the “correct” way (click on the 2nd box).

Am i missing something? I really hope you did not change your mind. It’s really a hassle and i think it should be the exception from the rule.

I don’t believe we’re changing how Yoga behaves.

In the link you shared, you only set padding though, try adding margin like this.

Actually I misunderstood your comment. Let me double-check.

It seems our version of Yoga is not calculating the width correctly. We’ll see what we can do about it. Worst case, we’ll make sure the documentation describes the existing behaviour.

1 Like

Thanks for the prompt answer. Very much appreciated. Let me clarify, from the perspective of a layout creating user, why i - and i’m sure the vast majority of web-developers would agree - think it’s bad:

The problem is the entanglement of concerns. When you add your padding and border to the width and start to fine-tune the layout, the changes propagate down the tree. That means, if you want the underlying structure to stay the same - and you probably would, that’s why you did it the way you did - you have to readjust it. But then maybe the child looks off again and you add another few pixels… and then again to the parent… and to the child… back and forth… until you say “well that’s good enough, i’ve got other things to do”. If you go for the border-box approach instead and subtract padding and border from the width, you can play with the values independently from the parent and find the result that makes your brain go aaaahhhh! so much quicker und without that frustration of wasted time. Finally, if you really want that effect of adding something to the width, you simply use a margin.

For me, in most situations, content-box is like a cheap screwdriver: You get the job done somehow, but the joy over your work is severely reduced by the blisters on your hand :wink:

Have a great day!

Hey,

We had a second look at the examples you shared with us and the result is that although it may seem counter intuitive, padding/border will not be deducted from the element’s size when using flex-grow parameters.

When recreating your UXML example in HTML or Yoga, one can observe that padding is actually added to the size making the element B larger than element A.

The Yoga playground example you shared actually specifies a fixed width in which case border-box works as expected.

Using the % unit for width/height is in my opinion a more natural way to obtain correct results in this kind of layout.

Hope this helps.

It helps a lot! Cheers!

Actually it more than helps. It removes a giant bummer! I am very happy now with the new UI. Have a good one!

1 Like

Hi team! is this bug fixed? I’m missing the box-sizing property so I guess it should be the default behavior but still the boxes sizes are being affected by the padding (which box-sizing fixes in html)

cheers!

This is not classified as a bug. See Antoine’s comment above:
https://discussions.unity.com/t/784188/6

1 Like

Thanks Damian! I just needed to know if it was a bug or no, in order to do my own implementation of box-size or just wait for it to be fixed.

thanks again!
cheers