Search Unity

Margin-Right is bugged

Discussion in 'UIElements' started by WizByteGames, Jun 3, 2019.

  1. WizByteGames

    WizByteGames

    Joined:
    Mar 28, 2013
    Posts:
    32
    OK so I noticed this in the editor tool I'm building using UI Elements. It seems margin-right isn't being set. Here is the style code that I use for my test example.

    I'm using a window that is 500x500

    Style.uss
    .container
    {
    background-color: rgb(100, 100, 100);
    width: 500;
    height: 500;
    margin-left: 10;
    margin-right: 10;
    margin-top: 10;
    margin-bottom: 10;
    }

    Style.cs
    public void OnEnable()
    {
    // Each editor window contains a root VisualElement object
    VisualElement root = rootVisualElement;

    // A stylesheet can be added to a VisualElement.
    // The style will be applied to the VisualElement and all of its children.
    var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/MarginTest.uss");
    VisualElement container = new VisualElement();
    container.AddToClassList("container");
    container.styleSheets.Add(styleSheet);
    root.Add(container);
    }

    I'm not sure if this is a bug or not and everytime I report a bug it turns out that it is just my imagination apparently.

    Also here is a screenshot Margin Bug.png
     
  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    20
    Hi,

    We can see in the debugger that the margin-right is indeed 10.

    Since you have set the width to 500 it seems that it is just a matter of the element being bigger then the window.
    You can try resizing the window or making the element smaller with the debugger.
    Then you should be able to see the margin at this point.
     
  3. WizByteGames

    WizByteGames

    Joined:
    Mar 28, 2013
    Posts:
    32
    That makes sense to me, but the thing is if I remove the margins for top and bottom the height is 500 like the size of the window. So I would assume left and right would adjust the width of the element. Or am I wrong about this?
     
  4. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    20
    Since your window has an height 500 the element will be shrinked so that it can fit inside its parent to accommodate the margins. This happen because flex-shrink has a default value of 1.
    If you set flex-shrink to 0 it will keep its height of 500.

    In your case if you want the element to take the width of the window you should just remove "width: 500;" from the USS.
    The element will stretch by default.

    This is how flexbox works and not a bug. Here's a jsfiddle demonstrating this : https://jsfiddle.net/ws297ndt/1/
    Try to remove the width on .container and you'll see.

    Finally for more info on flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
     
  5. WizByteGames

    WizByteGames

    Joined:
    Mar 28, 2013
    Posts:
    32
    Oh OK I understand now. So when it comes to flex-shrink is this basically only affecting height values of Visual Elements, Or is it for Width and Height?
     
  6. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    20
    It depends of the flex-direction.

    Please refer to the guide I linked above.
     
  7. WizByteGames

    WizByteGames

    Joined:
    Mar 28, 2013
    Posts:
    32
    Ah OK Thanks.