Creating an inline drop-down menu

Unity Engine
1

I’m attempting to create an inline drop-down menu using the PopupField class. Unfortunately, it seems like the size logic for this class is pretty strange. If I put it inline with some text, the content gets truncated in a weird way:

5348301--540057--Screen Shot 2020-01-07 at 11.02.50 PM.png

This is just using the code from the UIElements samples:

      var choices = new List<string> { "First", "Second", "Third" };
      // Create a new field and assign it its value.
      var normalField = new PopupField<string>(choices, 0) {value = "Second"};
      var row = new VisualElement();
      row.style.flexDirection = FlexDirection.Row;
      row.Add(new Label("Hello"));
      row.Add(normalField);
      root.Add(row);

Is there some way to accomplish this kind of inline dropdown functionality? (I know you can set a label on the PopupField, but I don’t like how that works… I want this dropdown to render inline).

I’m also interested in rendering two Popups next to each other, and this doesn’t work either:

5348301--540060--Screen Shot 2020-01-07 at 11.07.41 PM.png

2

Hi dthurn,

By looking at your images it seems that an element is clipping the Popup. You can use the UIElements debugger to inspect the overflow property of your elements.

I also made a small script that render Popups next to each other and it works as expected.

public class PopupRow : EditorWindow
{
    [MenuItem("UIElements/PopupRow")]
    public static void ShowExample()
    {
        var wnd = GetWindow<PopupRow>();
        wnd.titleContent = new GUIContent("PopupRow");
    }

    public void OnEnable()
    {
        var root = rootVisualElement;
      
        var choices = new List<string> { "First", "Second", "Third" };
        // Create a new field and assign it its value.
        var normalField = new PopupField<string>(choices, 0) {value = "First"};
        var row = new VisualElement();
        row.style.flexDirection = FlexDirection.Row;
        row.Add(normalField);
      
        var field2 = new PopupField<string>(choices, 0) {value = "Second"};
        row.Add(field2);
      
        var field3 = new PopupField<string>(choices, 0) {value = "Third"};
        row.Add(field3);
      
        root.Add(row);
    }
}

5349483--540255--upload_2020-1-8_10-19-30.png

3

@jonathanma_unity , what version of unity are you using? Your example does not work for me using the latest stable release (2019.2.17/OSX):

5350215--540378--Screen Shot 2020-01-08 at 10.19.08 AM.png

Is this perhaps a bug which has already been fixed in some future release?

4

I just tested with the latest 2019.2 release and you’re right that this doesn’t work, sorry about that.

Yes it is fixed on 2019.3 and up.
This is clearly a layout bug and I’m not sure when this was actually fixed.

If this is a problem for you on 2019.2, feel free to report a bug with the bug reporter (Help → Report a bug).
A quick work around would be to set the width of the Popup inside the USS.