How do I create a dropdown menu for a runtime menu? For example, I would like to use a dropdown to select the screen resolution. I found this ( Why does UIElements.DropdownMenu not derive from VisualElement? ) post, but this seems to be applicable only to the editor.
A new DropdownField control is available at runtime in 2021.1. PopupFields were dependent on the OS menu, thatâs why it was only for editor.
If youâre on an older version and canât upgrade to 2021.1 (which is in beta at the moment), you will need to make your own implementation, which can be based on the code we added for 2021.1.
2 Likes
Hello,
I am using 2021.1.0b8 and trying to use the DropdownField with no success. It looks good and âworksâ when viewed from the UIBuilder:
But then when you load the UXML in game it does not look correct, nor behave correctly. To test, I created new UIDocument and attached the DropdownUXML.uxml file demoed above.
There is no background to the text element, there is no background to drop down menu, the scrolling is egregiously slow, and when you use this element as a child element on another screen, instead of showing the drop down immediately below the text element, it creates the dropdown below the entire menu (at the very bottom of the screen, this is not shown here).
Is there a patch, or some change I can make to get the dropdown working in this latest version of Unity? I have attempted to create my own implementation of this UIElement but I wasted an entire day on my implementation and it still refuses to work correctly in runtime. I donât have any more time to spend on getting this done. This is a single, but critical step toward getting better UI in runtime for the simulator I am working on for the company I work for and I am on the hook for a solution asap.
Aside from the style issues (I think the style sheets are not loading in runtime or something), it acts as if the âabsolute positioningâ for the dropdown is targeting the wrong ârootâ at runtime.
1 Like
Using the UIToolkit debugger last night, I studied the response of the DropdownField in the UIBuilder and in the game. The only hint as to the reason that the DropdownField is behaving as it does in the game is that the USS file that is being used for the styling of the element doesnât seem to be present at runtime, so my working theory is that no styling is being applied to the element at runtime resulting in the very strange behavior that I am seeing. Is there a way to check / add the âDefaultCommonDark_inner.ussâ and/or âDefaultCommonLight_inner.ussâ?
As seen in the image below, I can open all of the other uss files shown in the list at the top, except for the two already mentioned (âDefaultCommon_____.ussâ) which are the two that seem to be being used to style the dropdown.
Is there any documentation available about how to use the new dropdown element?
Hi!
There was indeed an issue with the new theme styling for runtime, which was missing the dropdown style classes. It was fixed recently and will be available soon in the package for 2021.1. Documentation should also be available soon for the new UI Toolkit code.
In the meantime, I can answer any question you have about its usage. From what I can see, the issues youâre facing seem to be related to the missing styles.
When using 2021.1.1f1 the problem still persists. To use the style sheet files included with the âfixedâ 2021 version, should I âremoveâ the UI Toolkit package which has been carried forward from when we were using 2020?
Iâm also experiencing this issue with the runtime DropdownField. Iâm running 2021.1.3 with the built-in UI builder and using the UI Toolkit preview 14 package.
@jaeta here, try this: Take the attached stylesheet and add it to the dropdown element (or to any visualElement in the tree which contains the DropdownField) Either in UIBuilder or in code via:
StyleSheet unityFixedStyleSheet = Resources.Load<StyleSheet>("Styles/unity-fix");
visualElementRoot.styleSheets.Add(unityFixedStyleSheet);
This snippet will override the (currently NONEXISTANT) unity style (for DropdownField in runtime).
I used the Unity UI Debugger to sniff out all of these values in the UI Builder in the editor and then re-composed this document snippet to use at runtime until Unity decides to actually include the âDefaultCommonDark_inner.ussâ and/or âDefaultCommonLight_inner.ussâ for runtime use. You may have to add some images to your resources (see the style sheet: resource(âImages/triangle_shortâ); and resource(âImages/checkmark_lightâ) ) Those files need to exist inside a folder underneath Assets named âResourcesâ. I added the images as a zip file to this post.
I keep my images here:
âŚ/Assets/UI/Resources/Images/checkmark_light.png
âŚ/Assets/UI/Resources/Images/triangle_short.png
And I keep my stylesheets here:
âŚ/Assets/UI/Resources/Styles/unity_fix.uss
Required files are attached to the post. (You will need to unpack the images, and just remove the â.txtâ from the uss file, the forum wouldnât let me add a file with â.ussâ)
Too bad Unity hasnât been more helpful on this thread ⌠Hopefully this helps!
7092010â844627âImages.zip (28.2 KB)
7092010â844630âunity-fix.uss.txt (3.67 KB)
You sir, are a steely-eyed missile man"!! That fixed it, it also gave me some ideas of why some of my âcustom controlsâ seem to lose their border and background styling as well. Thanks!
I am using 2022.1.4 and now we can add our own style sheets to the UnityDefaultRuntimeTheme in the inspector. So we can easily override default styles or runtime only styles such as dropdown menu (IMPORTANT: it wonât work if you try to change dropdownâs style in a normal uss file, since itâs runtime only element, you have to add the uss file to the UnityDefaultRuntimeTheme).
Hope this help a bit to others because I was banging my head trying to figure it outâŚ