Question Change styles for DropdownField

Sorry if this has been asked before.

I'm trying to style a DropdownField control (one of the standard controls provided by Unity). I can click on the control and see the Style Class List (i.e., .unity-base-field, .unity-popup-field, etc.). I can then override those styles in my USS.

The problem is, some elements of the control aren't visible in the hierarchy. How do I determine which styles these elements are using? In the case of the DropdownField, the hierarchy does not display the elements in the dropdown menu where the list of choices is displayed.

How do I determine which styles to override? Is there documentation somewhere that has a list of these styles? I couldn't find any.

 

AFAIK, the only ways are using UI debugger, or look into source code (https://github.com/Unity-Technologi...cf797aafc37db8ea/ModuleOverrides/com.unity.ui)

 

Thank you. Looks like the UI Toolkit Debugger has the information I'm looking for.

 

Excellent tip @Maverick .

Any clue why some items do not inherit from my stylesheet? I'm trying to style the DropdownField where it pops open the choices drawer... Finally was able to find the relevant class names, but my styles don't apply.

Here's what the debugger says



It has font size 14px from "unity-stylesheet", even though I have this in my USS along with my other styles that work elsewhere

Code (CSharp):

1.  
2. .unity-base-dropdown__label {
3.     font-size: 42px;
4. }
5.  

No clue how to override the unity stylesheet stuff

 

Thank you @antoine-unity, this leads me to: Unity - Manual: UXML element DropdownField (unity3d.com)

But even when I target every single one of the classes, my styles are not being picked up. The select input, yes, bot the dropdown drawer, no.



When I look in the UI debugger, I see that this drawer is created as a global node, separate from all my other UXML doc hierarchies, and it only receives styles from the "UnityDefaultRuntimeTheme", but not my "Menu.uss" that holds all my styles





How can I attack this? Can I override the "UnityDefaultRuntimeTheme" or can I make sure that my "Menu.uss" is applied everywhere?

 

Actually @antoine-unity, I just posted this and tried one final thing, and it worked.

The UI Document component has panel settings


The panel settings has Theme Stylesheet



The Theme stylesheet can reference individual USS files



I added my Menu.uss there, and it works

 

I guess I kinda hijacked this thread, but I think you're right to update it... I'll also reference my Stack Overflow post with my original question and the conclusion I arrived at... That post already links here, so now I'll link back

https://stackoverflow.com/q/73221735/1600533

 

That helped me a lot. Thank you very much !

 

Thanks for explanation, also i think that https://docs.unity3d.com/2022.2/Documentation/Manual/UIE-uxml-element-DropdownField.html lacks some attributes i think.

 

Is there a "proper fix" yet? I tried the PanelSettings default override thing, which worked, but had the weird side effect of messing up the preview of my styling in UI builder. Here it is before the fix:



And now after the fix:



Notice how all my over-writing of default button styles is now gone in the Builder preview. When I actually play the thing it works fine, all my styles are applied, but not having an accurate static preview is a problem for my workflow with outside stakeholders.

 

Sorry to post again before a reply, but also, does anyone know exactly where the list item hover-over effect is coming from? When the dropdown option box is up and you mouse over a choice it changes to a blue background color and white text. I would like to change this style, use a different color, perhaps a different border or shape on the blue-colored bit, etc. Because it shuts off when I scroll off I can't seem to catch it in the debugger. Also, I see no :hover styles anywhere.

 

The unity dev replied to you, but your question still relates to the issue at hand in this thread. Unity is not allowing us to change any of the stylings in the dropdown right now, including your hovers that you wish to change. We'll have to wait for a fix to this. Soon I hope!

 

Is there a way to remove the scroll bars of the ScrollView that is created inside the dropdown panel. There are attributes "horizontal-scroller-visibility" and "vertical-scroller-visibility", but how do I set these for a ScrollView that is added dynamically, also outside of the hierarchy and without a distinct name or class.

 

Since I struggled a lot with this, I decided to add my two cents for those who might renounce quicker than I did.
The inspector for the unity default runtime theme present the "default" theme (internal one) like the .tss that you created in your assets with the Create > UI Toolkit > Default Runtime Theme File
Furthermore, if you change the "default" theme with something else than "default", you cannot go back to the default runtime theme without deleting the created .tss and recreating it or editing the file with a text editor.

If you want to check the content of the .tss file directly, it should look like the following (mainUI.uss being an additional uss with the dropdown item styling

Code (Boo):

1. @import url("unity-theme://default");
2. @import url("mainUI.uss");
3. VisualElement {}

If you've done everything right, the UI Toolkit Debugger will show the following stylesheets on the separate hierarchy that contains the items :

Code (Boo):

1. UnityDefaultRuntimeTheme
2. (default)
3. (mainUI)

And every style you defined should work properly.
If, for some reason, some are not applied, try to add elements to your selector in your .uss file: the more complex the selector is, the more precedence it has over the default ones (Look at the selector reference for more detail on composite selectors and priority)

 

Is there perhaps already news regarding the issue?

 

Very helpful answer

 

Wouldn't it be very easy to fix this on Unity's end by simply adding the stylesheets to the generated dropdown menu which were attached to the original DropdownField? Looking at the reference source code I think this could be done in the BasePopupField script in the ShowMenu method starting at line 191.

The PanelSettings workaround feels pretty messy and also doesn't allow multiple styles for dropdowns as they would all be using the styles from the PanelSettings.

 

Thank you so much, this is exactly what I need.
But, I hope this will not much effect other ui parts.

 

@antoine-unity @cpalma-unity
Is there already a proper fix for this?
The workaround of adding my stylesheet to the theme stylesheet does not work very well. It messes up the entire canvas, because (I think) the default style and my own custom style are mixed up instead of preferring my uss style over the default theme style.