2

I'm in the process of implementing a form view with Unity's new-ish UI toolkit, and styling my own stuff is simple, using the UI builder. No biggie.

When it comes to Unity's pre-built "Controls", styling in the UI builder is very limited. I can set some styles on the outermost parent, but the inner controls, I cannot mess with.

I can, however, see what classes those components use, and I can override their rules by simply editing the USS file by hand. Not sure why this restriction is there, but so be it.

With the DropdownField, however, I can style the input and the arrow, etc. without much trouble, but I cannot find the class for the actual dropdown panel, and I'd like to be able to fix the color, font, size, etc. of that as well, so it looks less bad

enter image description here

Looking in the source for the DropdownField, I can pick up some class names that I couldn't see in the UI builder, but even when spamming CSS rules at them, I don't seem to hit the right ones

from DropdownField.cs

internal static readonly string ussClassNameBasePopupField = "unity-base-popup-field";
internal static readonly string textUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__text";
internal static readonly string arrowUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__arrow";
internal static readonly string labelUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__label";
internal static readonly string inputUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__input";
internal static readonly string ussClassNamePopupField = "unity-popup-field";
internal static readonly string labelUssClassNamePopupField = DropdownField.ussClassNamePopupField + "__label";
internal static readonly string inputUssClassNamePopupField = DropdownField.ussClassNamePopupField + "__input";

from my USS file

.unity-base-popup-field {
    font-size: 42px;
}
.unity-base-popup-field__text {
    font-size: 42px;
}
.unity-base-popup-field__input {
    font-size: 42px;
}
.unity-base-popup-field__label {
    font-size: 42px;
}

.unity-popup-field {
    font-size: 42px;
}
.unity-popup-field__text {
    font-size: 42px;
}
.unity-popup-field__input {
    font-size: 42px;
}
.unity-popup-field__label {
    font-size: 42px;
}

I'm not really sure how to progress from here... Any help finding what I'm looking for? Or should I go about it in a different way?

EDIT: I forgot for a second that this is stack overflow, and we'll be beheaded for minor offenses, so I took out some helpful screenshots and copied in some codeblocks instead /shrug

Eldamir
  • 9,888
  • 6
  • 52
  • 73

2 Answers2

9

Managed to answer my problems myself after a lot of digging. Full discussion here

Disclaimer for the angry SO-Meta editors who likes to close everything instead of being helpful: I've attached photos to the answer. Very sorry, but this is the most illustrative way to explain how things are wired together. There is no code involved in the answer. Just editor references.

I looked in the UI debugger and I could see that the DropdownField drawer was instantiated as a global element in the hierarchy, and not a child of any of my UXML documents. All of my UXML docs reference a shared Menu.uss file for styles, but since this drawer becomes a root component, it doesn't read from my USS at all. The UI debugger confirmed as much.

My UXML:

enter image description here

The dropdown drawer:

enter image description here

So after some back and forth on the forums I went digging, and found the fix.

The UI Document component that renders the UI at runtime has panel settings:

enter image description here

The panel settings has a Theme Stylesheet:

enter image description here

Make a copy of the default stylesheet and reference you copy instead. Then add in your stylesheet there, which will make sure that every single element picks up the styles:

enter image description here

Now everything works as expected:

enter image description here

Eldamir
  • 9,888
  • 6
  • 52
  • 73
  • 1
    Did the reference of my own sheet, and it still doesn't work. But I noticed now (in newer version - 2022.3.0 LTS), the dropdown is actually a child of the parent now. – KeepCool Jul 11 '23 at 20:31
1

I had the same problem and but to complete your solution, I have to add ".unity-base-dropdown__item{ ....} to my css

Ogône SAS
  • 11
  • 2
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34040665) –  Mar 20 '23 at 18:00
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 20 '23 at 21:44