InspectorElement seems broken still

Unity Engine
1 
        private static bool BuildInspectorProperties(SerializedObject obj, VisualElement wrapper)
        {
            if (obj == null || wrapper == null) return false;

            wrapper.Add(new Label { text = " ⓘ Asset Inspector" });
            InspectorElement inspector = new InspectorElement(obj);

            inspector.style.flexGrow = 1;
            inspector.style.flexShrink = 1;
            inspector.style.alignSelf = new StyleEnum<Align>(Align.Stretch);
            inspector.style.display = new StyleEnum<DisplayStyle>(DisplayStyle.Flex);
         
            wrapper.Add(inspector);
            return true;
        }

Renders this:

7642549--952345--inspector_uie.png
7642549--952345--inspector_uie.png940×1240 95 KB

Whereas if I manually draw all of the properties then I get the expected results:

7642549--952354--inspector_uie_manual.png
7642549--952354--inspector_uie_manual.png949×1363 98.1 KB

It still seems like default inspector drawing in UI Toolkit is not a functional thing, but I wanted to double check since this has been an issue on the board since mid 2019.

ref

2

I suppose I’ll just continue to assume this is broken until further notice.

3

Any hopes for this to work in 2021.x?

4

Hi,

It certainly looks like a bug. Could you report it with the use of “Help->Report a Bug”.
This way we will be able to reproduce and track the bug.

Thanks!

5

Hi @jonathanma_unity

I went ahead and made a minimal window that draws the active selection object’s editor. This seems to work fine. I’m assuming that this bizarre offset in the nested inspector drawn the same way is due to inherited style settings or something in a parent. Does this sound like something that could be happening?

Apparently the old approach I have for drawing this is problematic in 2021.x with Arrays so I need to migrate to InspectorElement asap. This layout issue is the only roadblock but I cannot find any setting to prevent this from happening and the other properties drawn as Elements are laid out just fine (they’re in the exact same place in hierarchy) so I’m at a loss as to why this is happening.

After thinking about it, could it be that the name width is pulled from the EditorWindow itself (wow I hope not)? Why don’t the properties that are manually drawn out inherit in the same way?

Minimal window code that works fine:

using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine;

public class TestWindow : EditorWindow
{
    private static TestWindow m_editorWindow;
    private static Object m_selection;

    [MenuItem("Test/Editor Window", priority = 0)]
    public static void Open()
    {
        if (m_editorWindow != null)
        {
            FocusWindowIfItsOpen(typeof(TestWindow));
            return;
        }
        m_editorWindow = GetWindow<TestWindow>();
    }
    public void OnEnable()
    {
     
    }
    public void OnGUI()
    {
        if (m_selection == Selection.activeObject) return;

        m_selection = Selection.activeObject;
        Change();
    }

    private void Change()
    {
        rootVisualElement.Clear();

        InspectorElement inspector = new InspectorElement(m_selection);
        Editor editor = Editor.CreateEditor(m_selection);
        inspector.Bind(editor.serializedObject);
        rootVisualElement.Add(inspector);
    }
}

Snippet of how the other inspector is drawn (broken alignment) :

        private static bool BuildInspectorProperties(SerializedObject obj, VisualElement wrapper)
        {
            if (obj == null || wrapper == null) return false;
            wrapper.Add(new Label { text = " ⓘ Asset Inspector" });

            InspectorElement inspector = new InspectorElement(obj);
            inspector.Bind(obj);
            wrapper.Add(inspector);
            return true;
6

Okay, I made an isolated case that can repro. The InspectorElement has clear issues drawing properties with the proper width in a layout.

Reported as case 1404093.

In the example I basically make 3 columns and put the InspectorElement into the third column, and it proceeds to fail to layout correctly. If we won’t draw the other two columns, it aligns content fine because it’s aligned with the EditorWindow.

using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine;
using UnityEngine.UIElements;

public class TestWindow : EditorWindow
{
    private static TestWindow m_editorWindow;
    private static Object m_selection;

    [MenuItem("Test/Editor Window", priority = 0)]
    public static void Open()
    {
        if (m_editorWindow != null)
        {
            FocusWindowIfItsOpen(typeof(TestWindow));
            return;
        }
        m_editorWindow = GetWindow<TestWindow>();
    }
    public void OnEnable()
    {
        rootVisualElement.style.width = 800;
    }
    public void OnGUI()
    {
        if (m_selection == Selection.activeObject) return;

        m_selection = Selection.activeObject;
        Change();
    }

    private void Change()
    {
        rootVisualElement.Clear();
        rootVisualElement.style.flexDirection = FlexDirection.Row;

        // make columns
        VisualElement leftElement = new VisualElement();
        leftElement.style.minWidth = 200;
        leftElement.style.width = 200;
        leftElement.Add(new Label("LEFT COLUMN"));
        VisualElement centerElement = new VisualElement();
        centerElement.style.minWidth = 200;
        centerElement.style.width = 200;
        centerElement.Add(new Label("CENTER COLUMN"));
        VisualElement rightElement = new VisualElement();
        rightElement.style.minWidth = 400;
        rightElement.style.width = 400;
        rightElement.Add(new Label("RIGHT COLUMN"));


        // make inspector
        InspectorElement inspector = new InspectorElement(m_selection);
        Editor editor = Editor.CreateEditor(m_selection);
        inspector.Bind(editor.serializedObject);


        // insert
        rightElement.Add(inspector);
        rootVisualElement.Add(leftElement);
        rootVisualElement.Add(centerElement);
        rootVisualElement.Add(rightElement);
    }
}
1 Like
7

I can confirm that there are issues using the InspectorElement class. I am attempting to show fields inside of a state graph, and I see unresponsive buttons and overflowing content, no matter what I do with the parent VisualElements

7993701--1027326--upload_2022-3-25_6-55-47.png

1 Like
8

Did this case ever get looked at? It’s still broken in 2022.2

1 Like