Search Unity

Bug Weird behaviour of layout engine when adding and removing VisualElements

Discussion in 'UIElements' started by Cence99, Sep 5, 2019.

  1. Cence99

    Cence99

    Joined:
    Apr 14, 2013
    Posts:
    39
    Hello there,

    I am experiencing some weird behaviour with my custom inspector built for a ScriptableObject using UIElements.

    Here you can see what is going on:

    It is a gif file. If it does not show here, try this link: https://imgur.com/YHLYIj0

    What you see is 3 VisualElements being the 3 groups (Prefab header and all its fields, Float, and String groups). Certain rows are being added and removed as children of these groups. A row is the ID label and textbox as well as the value textbox, field and "x"-button.

    I simply use the
    Code (CSharp):
    1. visualElement.Remove(x)
    and
    Code (CSharp):
    1. visualElement.Add(x)
    functions for this. The groups are essentially empty containers that have the heading, all the fields and Add-button as children.

    Does the layout engine have a bug, or did I mess up somewhere? Unity version is 2019.1.9f1 Personal.

    If you have any further questions, please don't hesitate to ask.
    Thank you in advance.
     
  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    61
    Hi Cence99,

    Can you elaborate on what is weird in this case?

    I looked at the gif and I'm not sure what you want to achieve exactly. Add/Remove seems to work as expected from that gif.

    Thanks!
     
  3. taylank

    taylank

    Joined:
    Nov 3, 2012
    Posts:
    102
    Sorry, I'm not sure what the issue is? The gif is moving really fast so it's hard to understand what's going on.
     
  4. Cence99

    Cence99

    Joined:
    Apr 14, 2013
    Posts:
    39
    Apologies. This gif is very slow and I will explain what is going on: https://imgur.com/1WCT6L8

    At the start you can see a prefab row being removed by clicking on the `X`. At the same time, the row below the `Float` header also disappears, except for the `X`-button (which is unintended, only the prefab row has been deleted. Nothing has been done to any VisualElements in the Float group). Adding a String row, then a Prefab row, somehow results in the textboxes and fields scaling down, in some instances they will also disappear until another row is added or removed.

    I cannot seem to track down any bug in my code, it should work as intended. I am wondering if this is a bug with the layout engine or if I messed up.

    If this is an error made by me, I would appreciate any pointers you might have to what I did wrong. I can also provide more information, screenshot of the debugger, or code snippets.

    Edit: If you pay attention to the "ID:" labels on the left, you can see them overlapping with the "Add"-buttons when the bug with the scaling down occurs. It seems like the layout somehow does not manage to re-adjust to the three groups growing and shrinking, resulting in these squashed elements.
     
  5. taylank

    taylank

    Joined:
    Nov 3, 2012
    Posts:
    102
    Have you used the UIElements Debugger to confirm your hierarchy is built properly? You can activate it by right clicking the inspector tab and choosing UIElements Debugger, or hitting ctrl+F5. I'd check that to see your rows are being parented correctly.

    As for the layout issues: you can try subscribing to the GeometryChanged event (or your own event detecting change in rows) and calling repaint manually when it happens?
     
  6. Cence99

    Cence99

    Joined:
    Apr 14, 2013
    Posts:
    39
    Alright, so it indeed seems to be a bug with UIElements in Unity 2019.1.9f1.

    I upgraded my project to Unity 2019.3.0b1 and it works as intended. On top of that, the placement seems to be much more precise.
     
  7. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    61
    This seems to be a case of flex-shrink being enabled. For a quick test you may want to try in your USS :
    Code (JavaScript):
    1. * {
    2. flex-shrink: 0;
    3. }
    Great, there was some tweaks into the layout to get the percentage support so that might be what fixed your issue. However, what I posted above might help you as well. It is a matter of making sure that your containers do not shrink if there's not enough space. Another options is to use a ScrollView which should also prevent this.