Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Nested BeginHorizontal/Vertical elements break alignment

Discussion in 'Immediate Mode GUI (IMGUI)' started by Reahreic, Sep 22, 2020.

  1. Reahreic

    Reahreic

    Joined:
    Mar 23, 2011
    Posts:
    254
    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:
    Empty Columns.JPG

    Populated Columns
    Populated Columns.JPG

    The most stripped down example that causes this issue i can create is:
    Code (CSharp):
    1. GUIStyle boundingBoxStyle;
    2. new void OnEnable(){
    3.   boundingBoxStyle = new GUIStyle(EditorStyles.helpBox);
    4.   boundingBoxStyle.name = "Bounding Box";
    5.   boundingBoxStyle.alignment = TextAnchor.UpperLeft;
    6.   boundingBoxStyle.stretchWidth = false;
    7. }
    8.  
    9. public override void OnInspectorGUI(){
    10.   //rectA: "(x:14.00, y:421.00, width:376.00, height:22.00)"
    11.   Rect rectA = EditorGUILayout.BeginHorizontal(boundingBoxStyle);
    12.   {
    13.     //rectB: "(x:18.00, y:424.00, width:344.00, height:16.00)"
    14.     Rect rectB = EditorGUILayout.GetControlRect();
    15.    
    16.     //rectC: "(x:366.00, y:425.00, width:8.00, height:6.00)"
    17.     Rect rectC = EditorGUILayout.BeginVertical(boundingBoxStyle);
    18.     {
    19.        EditorGUILayout.ToggleLeft(new GUIContent("Enable Apocalypse"), true);
    20.     }
    21.     EditorGUILayout.EndVertical();
    22.  
    23.     //rectD: "(x:378.00, y:425.00, width:8.00, height:6.00)"
    24.     Rect rectD = EditorGUILayout.BeginVertical(boundingBoxStyle);
    25.     {
    26.         EditorGUILayout.ToggleLeft(new GUIContent("Anger Lizard People"), true);
    27.     }
    28.     EditorGUILayout.EndVertical();
    29.  
    30.   }
    31.   EditorGUILayout.EndHorizontal();
    32. }
    33.  
     
  2. AnKOu

    AnKOu

    Joined:
    Aug 30, 2013
    Posts:
    123
    This code :
    Code (CSharp):
    1. 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 :
    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.

    Code (CSharp):
    1.  
    2.     //rectC: "(x:366.00, y:425.00, width:8.00, height:6.00)"
    3.     Rect rectC = EditorGUILayout.BeginVertical(boundingBoxStyle);
    4.     {
    5.        EditorGUILayout.ToggleLeft(new GUIContent("Enable Apocalypse"), true);
    6.        EditorGUILayout.ToggleLeft(new GUIContent("Anger Lizard People"), true);
    7.     }
    8.     EditorGUILayout.EndVertical();
    9.  
     
  3. Reahreic

    Reahreic

    Joined:
    Mar 23, 2011
    Posts:
    254

    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.