Search Unity

Question Render element on top of everything else

Discussion in 'UI Toolkit' started by Hertzole, Sep 13, 2020.

  1. Hertzole

    Hertzole

    Joined:
    Jul 27, 2013
    Posts:
    422
    Hi

    I'm trying to create some sort of dropdown and I want my dropdown to render on top of everything else but I'm encountering a whole load of issues with that.

    To start, I know everything renders in the same order as the hierarchy. The problem is with moving the dropdown.

    If I make it create the dropdown at runtime when it's first needed and set the parent to the root (using 
    GetRoot().ElementAt(0)
    ) it won't get the style applied.
    So then I added it to the hierarchy (using 
    hierarchy.Add(dropdown);
    ) first and then I moved it by using Insert on the root but then it lost it's style again. If I just keep it in the hierarchy, everything that comes after will be rendered on top of my dropdown.

    What are my options to force something to render on top of everything else?

    Thanks
     
    Hertzole, Sep 13, 2020
    #1

  2. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    The custom dropdown in this example @mcoted3d posted here renderes above everything else. It should be able to get you pointed in the right direction, and is a usable example.

    Edit --- Though, it is for an editor tool, I have not messed with runtime UI yet, I am not sure if it works differently at all?
     
    MostHated, Sep 13, 2020
    #2

  3. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    Styles come from a StyleSheet (attached to a parent element) or for some specific styles, are inherited from the parent element styles. Either way, if you move a child element outside the parent containing the inherited styles, that child won't get those styles anymore.

    However, you can solve this by:
    1. if you already have a global USS that is applied to the entire UI (USS applied to the root element), you can assign your dropdown floating element proper class names to get the correct styles no matter where it is in the hierarchy.
    2. if you only use local USS attached to each control or UXML, have your floating dropdown element re-apply that same local USS onto itself. For example:
    Code (CSharp):
    1. rootVisualElement
    2.     my_dropdown <- my_dropdown.uss
    3.     some-element
    4.     my_dropdown_floating_pane <- my_dropdown.uss
     
    uDamian, Sep 14, 2020
    #3

  4. Hertzole

    Hertzole

    Joined:
    Jul 27, 2013
    Posts:
    422
    Thanks for the link! From the looks of it, it doesn't seem to offer something new. I've found a way to add it as the last element but it loses the style.
    1. I added my dropdown menu to the parent of my base control, which in this case is TemplateContainer. TemplateContainer does not have the custom USS applied and thus my dropdown does not get the USS. I don't think I can even target it. It literally only has the Default.uss applied.
    2. This one I don't fully understand, but it's probably because I'm not using whatever a local USS is.
     
    Hertzole, Sep 14, 2020
    #4

  5. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    My apologies, I was a bit too trigger happy it seems, thinking I had a way to actually help for once, lol.
     
    MostHated, Sep 15, 2020
    #5

  6. Hertzole

    Hertzole

    Joined:
    Jul 27, 2013
    Posts:
    422
    Don't be so hard on yourself. Every little bit of help, even if it may not directly help solve the issue, is always very appreciated. :)
    Just shows that you care to spend some time of your valuable day to help someone else, which is great!
     
    Hertzole, Sep 15, 2020
    #6