Bug or Lack of Understanding

Hi All,
Through C# I’m attempting something very simple. I have a VisualElement as a container in the root of the document, all that is set is position relative, width and height 100% and a black background. I have set a 1px blue border to be 20px inside the element using top, bottom, left, right margin styles. These all work fine except the right border which is nowhere to be seen. If I set the right margin to 0 the blue border is right there on the edge.
I’ve played about with negative values and absolute position (where I lost the bottom border also) and can’t get the result I want. I think it’s a bug where the value is being applied in the wrong direction but not knowing CSS that well I can’t be sure. It seems so simple.
Can anyone throw some light on this.

Cheers

Chris

Suggest using the UI Builder to get the CSS just right before coding the styles in C#.

Not saying there’s no bug - its just faster to debug/learn/iterate.

I agree with Kami. Try to use the UI Builder for the CSS.

I appreciate the sentiments but I can iterate far faster in C#. I did go and check the same in UIBuilder and the problem is there also (see screenshot) where the bottom margin behaves as expected and the right doesn’t.

If you set brown border to 0 is it displaying correctly ?
The picture gives this impression like the border is added after the width and height is set.

Are you sure it’s not just going off the screen because you are setting it to 100% width and adding a margin?

Here’s your same layout in regular html:

“If that item also has a margin or padding, that value is added onto the 100% width. So you end up with the element sticking out of the right margin of your design.”

__https://it4np.com/2016/12/tip-css-trick-for-div-width100-that-account-for-margins-or-padding-by-subtracting.html__

This stackoverflow thread has a demonstration of the issue.

If that is your issue, to get around it you need to use the ‘calc’ operator to account for the margin/padding in your width, but unfortunately unity doesn’t support it yet. In my case I’m calculating it manually in C# and then setting the width at runtime.

Thanks for reply, that is the issue. It was my lack of understanding :slight_smile:

1 Like