Make next item on list further down on a reorderable list in the editor

Unity Engine
1

As you can see from the image I am trying to make variables on another line, I don’t want all the variables on the same line otherwise the width will end up taking up the whole screen.

My problem is the next item on the list overlaps the variables of the second line of variables for the first item.

I’ve been searching for hours for a solution and I’m new to Editor scripting, I just can’t seem to find the answer.

I tried using EditorGUILayout.BeginVertical(“window”); + EditorGUILayout…Space(20f); + EditorGUILayout.EndVertical();

Which was the closest I could get to my desired result but then the items were outside of the reorderable list

What am I doing wrong?

Here’s the code:

list.drawElementCallback = (Rect rect, int index, bool isActive, bool isFocused) =>
        {
            var element = list.serializedProperty.GetArrayElementAtIndex(index);
            rect.y += 2;

            rect = EditorGUILayout.BeginVertical("window");
            EditorGUI.PropertyField(new Rect(rect.x, rect.y, rect.width - 300, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("Prefab"), GUIContent.none);
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300, rect.y, 50, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("BuyPrice"), GUIContent.none);
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 50, rect.y, 50, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("SellPrice"), GUIContent.none);
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 100, rect.y, 50, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("CookTime"), GUIContent.none);
            // Position
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 150, rect.y, 30, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("RotX"), GUIContent.none);
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 180, rect.y, 30, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("RotY"), GUIContent.none);
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 210, rect.y, 30, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("RotZ"), GUIContent.none);
            // Rotation
            EditorGUILayout.Space(30f);
            rect.y += 2;
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 150, rect.y + EditorGUIUtility.singleLineHeight, 30,
                EditorGUIUtility.singleLineHeight), element.FindPropertyRelative("RotX"), GUIContent.none);
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 180, rect.y + EditorGUIUtility.singleLineHeight, 30,
                EditorGUIUtility.singleLineHeight), element.FindPropertyRelative("RotY"), GUIContent.none);
            EditorGUI.PropertyField(new Rect(rect.x + rect.width - 300 + 210, rect.y + EditorGUIUtility.singleLineHeight, 30,
                EditorGUIUtility.singleLineHeight), element.FindPropertyRelative("RotZ"), GUIContent.none);
            EditorGUILayout.EndVertical();
        };
2

I’m not sure what editor APIs you’re using but I think you want a Custom Property Drawer to pull this off:

And then you would just flow it vertically with the GUILayout.

1 Like