Nested BeginHorizontal/Vertical elements break alignment

Unity Engine
1

I’ve run into an issue with a customEditor that i can’t seem to figure out. When i nest one or more EditorGUILayout.BeginVertical’s within a EditorGUILayout.BeginHorizontal the begin vertical ends up getting pinned to the right side of the field despite setting the style’s anchor to upper left.

Furthermore if i add any properties to the BeginVertical’s the columns never fill more than half the parent’s width and instead overflow off screen.

Empty Columns:
6337059--703683--Empty Columns.JPG

Populated Columns
6337059--703686--Populated Columns.JPG

The most stripped down example that causes this issue i can create is:

GUIStyle boundingBoxStyle;
new void OnEnable(){ 
  boundingBoxStyle = new GUIStyle(EditorStyles.helpBox);
  boundingBoxStyle.name = "Bounding Box";
  boundingBoxStyle.alignment = TextAnchor.UpperLeft;
  boundingBoxStyle.stretchWidth = false;
}

public override void OnInspectorGUI(){
  //rectA: "(x:14.00, y:421.00, width:376.00, height:22.00)"
  Rect rectA = EditorGUILayout.BeginHorizontal(boundingBoxStyle);
  {
    //rectB: "(x:18.00, y:424.00, width:344.00, height:16.00)"
    Rect rectB = EditorGUILayout.GetControlRect();
    
    //rectC: "(x:366.00, y:425.00, width:8.00, height:6.00)"
    Rect rectC = EditorGUILayout.BeginVertical(boundingBoxStyle);
    {
       EditorGUILayout.ToggleLeft(new GUIContent("Enable Apocalypse"), true);
    }
    EditorGUILayout.EndVertical();

    //rectD: "(x:378.00, y:425.00, width:8.00, height:6.00)"
    Rect rectD = EditorGUILayout.BeginVertical(boundingBoxStyle);
    {
        EditorGUILayout.ToggleLeft(new GUIContent("Anger Lizard People"), true);
    }
    EditorGUILayout.EndVertical();

  }
  EditorGUILayout.EndHorizontal();
}
2

This code :

Rect rectB = EditorGUILayout.GetControlRect();

Why are you calling this ? You don’t use it.
Actually it reserves a rect in the UI space. I think this is this call which occupy this space :
6344289--704955--upload_2020-9-24_14-33-23.png

Also, you must call all the ui you want vertical inside the same beginvertical / endvertical.
Especialy since they share the same style.
Also to preserve garbage, you should cache the GUIContent in class variable instead of creating new guicontent each time.

    //rectC: "(x:366.00, y:425.00, width:8.00, height:6.00)"
    Rect rectC = EditorGUILayout.BeginVertical(boundingBoxStyle);
    {
       EditorGUILayout.ToggleLeft(new GUIContent("Enable Apocalypse"), true);
       EditorGUILayout.ToggleLeft(new GUIContent("Anger Lizard People"), true);
    }
    EditorGUILayout.EndVertical();
3

Honestly i don’t even remember… I ended up re-factoring the non-example class late last week so that the portion in question was shunted into a property drawer where i manually controlled the layout with “float columnWidth = (rect.width - 4f) / 3;//-4 for small spacing between columns” to maintain momentum and progress. (The non-example class has a whole lot more data in the columns than just the stripped properties above so refactoring made sense.)

I think it was placed there in an attempt to visualize/extract the dimensions of the space as EditorGUILayout wasn’t sizing the columns correctly. If i pull it out or my example code file the gap disappears, so no clue why i had the original issue… There’s still an overflow on the right that EditorGUILayout doesn’t fit correctly, but that’s OBE now.

While there were only one property in each column in the example in the final class there are multiple rows & columns, each with several properties that are shown/hidden based on selections. I didn’t include all that to avoid a giant wall of text that had to be filtered through.

Good call on the new GUIContent calls, i’m usually a stickler for avoiding new allocations when i can, but seem to not do that in the editor.

I apologize for not closing this request, it must have completely slipped my mind till i checked in this morning although i’d still love to know why the column widths appear to ignore the styles padding.