Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
New Forum User Notice Update to the Unity Editor Software Terms

Change the style and size of the child elements of the Dropdown Field.

Discussion in 'UI Toolkit' started by DREBOTgamestudio, May 30, 2022.

  1. DREBOTgamestudio

    DREBOTgamestudio

    Joined:
    Jan 30, 2018
    Posts:
    66
    Hello. Can someone tell me how can I change the drop Dropdown Field? I can not modify the size and style of child elements from editor.

    upload_2022-5-30_21-29-0.png
    upload_2022-5-30_21-27-36.png
     
    DREBOTgamestudio, May 30, 2022
    #1

  2. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    700
    You can see the class names in the debugger:

    upload_2022-5-30_23-15-11.png
     
    dlorre, May 30, 2022
    #2
    Redec5 and DREBOTgamestudio like this.

  3. DREBOTgamestudio

    DREBOTgamestudio

    Joined:
    Jan 30, 2018
    Posts:
    66
    Thanks. That is, the only way out is to set the styles through the code? Is this possible using only the UIBuilder?
     
    DREBOTgamestudio, May 30, 2022
    #3

  4. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    700
    You can put them in a style sheet, however it is a top level element, of the same level than the UI Document itself, so you'd need to declare the style sheet in the theme sheet:

    upload_2022-5-31_7-47-20.png
     
    dlorre, May 31, 2022
    #4
    DREBOTgamestudio likes this.

  5. DREBOTgamestudio

    DREBOTgamestudio

    Joined:
    Jan 30, 2018
    Posts:
    66
    Thank you. This method works. Unfortunately, using this method with a Dropdown Field is not convenient.
     
    DREBOTgamestudio, May 31, 2022
    #5

  6. bfoddy

    bfoddy

    Joined:
    Mar 27, 2012
    Posts:
    85
    I don't quite understand. I tried defining USS rules for .unity-base-dropdown__label, but it doesn't do anything. Are you saying I have to modify the Unity default theme to be able to style dropdownfields?
     
    bfoddy, Jun 2, 2022
    #6

  7. bfoddy

    bfoddy

    Joined:
    Mar 27, 2012
    Posts:
    85
    Doesn't help that Unity has to be restarted for this change to propagate.
     
    bfoddy, Jun 2, 2022
    #7

  8. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    369
    The dropdown is creating the popup as the last child of the root container, so that it appears on top of everything. It's a limitation that we have at the moment.

    No, you do not need to modify the default theme, you can also add a style sheet to the root container. This can be done manually (
    rootVisualContainer.stylesheets.Add(...)
    ) or you can add a stylesheet to your own runtime theme if you are using that.

    Which change do you mean? If something is not updated properly after a change, you can try to re-import the theme, uxml or uss file. In most cases, it should fix your update issue without requiring to restart Unity.

    And of course, please report a bug for it if something is not refreshing correctly :)
     
    martinpa_unity, Jun 2, 2022
    #8

  9. ehchilds

    ehchilds

    Joined:
    May 14, 2019
    Posts:
    3
    How do you view those items in the debugger? I currently do not see any of those when looking at the debugger. (only the dropdown > visual element > popup, and visual element
     
    ehchilds, Aug 2, 2022
    #9

  10. theStiggler

    theStiggler

    Joined:
    Oct 21, 2013
    Posts:
    7
    what is the rootVisualContainer that is being referenced here/how do i access it to add the stylesheet?
     
    theStiggler, Aug 31, 2022
    #10

  11. theStiggler

    theStiggler

    Joined:
    Oct 21, 2013
    Posts:
    7
    I managed to figure out how to add styles in the method described not long after posting this reply.

    The rootVisualContainer is the VisualElement that all the seperate rootVisualElement of UIDocuments are children of.
    So to add a stylesheet to the root VisualElement you can do:

    Code (CSharp):
    1.  
    2. VisualElement root = uiDocument.rootVisualElement;
    3.  
    4. // SomeUSS is a reference to a StyleSheet
    5. root.parent.styleSheets.Add(SomeUSS);
    Then styles with the selector 
    .unity-base-dropdown__item
    in the referenced stylesheet will be applied to the selectable child elements of the dropdown field.
     
    Last edited: Aug 31, 2022
    theStiggler, Aug 31, 2022
    #11
    martinpa_unity likes this.