X
2831

How to control the layout of buttons on a widget base

The alignment of radio buttons with their labels on a widget base is not always easy to control. The buttons are aligned according to the legnth of the button label. Therefore, when one button has a long label, and one has a short, if the radio buttons are to the right of the labels, they will not align. 

The solution is to: 

  1. Make a top level base to hold everything.
  2. Make a column sub-base on the TLB with COLUMN = 2.
  3. Each column will have 2 more sub bases on it. The one to the left will hold the label base. The one on the right will hold the exclusive base for the radio buttons.
  4. The only other thing that is needed is a way to be sure that the ysize for all of the label and button bases are the same size. To ensure this, create a temporary base first. Extract the ysize of the temporary base, and set the YSIZE to each sub-bases to the same value. This value should be determined as the ysize of the radio buttons that are created.
To fine tune the resulting widget appearance, you can center the bases over each other.  The below code provides an example of how to control the layout of buttons on a widget base. 

PRO widget_spacing_control
 
;Create a temporary base to calculate the YSIZE of
;  the button widgets that will be used, then destroy
;   the base after the size is obtained.
;  This is important for correct vertical alignment of
;  the labels and their buttons
tempBase = WIDGET_BASE()
   tempBtnBase = WIDGET_BASE(tempBase, /EXCLUSIVE)
      tempBtn = WIDGET_BUTTON(tempBtnBase, VALUE='X')
tempSize = WIDGET_INFO(tempBtnBase, /GEOMETRY)
baseYSize = tempSize.scr_ysize
WIDGET_CONTROL, tempBase, /DESTROY
 
;this procedure shows how to arrange radio buttons and labels that line up.
tlb = WIDGET_BASE(COLUMN = 2)
  
   ;Create a subBase to hold all of the WIDGET_LABELS
   ;   Each label needs to be placed in it's own subBase
   ;   so that the YSIZE can be controlled and the label
   ;   will align with its buttons.
   labelSubBase = WIDGET_BASE(tlb, /COLUMN, /BASE_ALIGN_LEFT)
      labelBase = WIDGET_BASE(labelSubBase, /ROW, /BASE_ALIGN_CENTER, $
                       YSIZE=baseYSize)
           label1 = WIDGET_LABEL(labelBase, VALUE = 'Label 1')
      labelBase = WIDGET_BASE(labelSubBase, /ROW, /BASE_ALIGN_CENTER, $
                       YSIZE=baseYSize)
           label2 = WIDGET_LABEL(labelBase, VALUE = 'Longer Label')
      labelBase = WIDGET_BASE(labelSubBase, /ROW, /BASE_ALIGN_CENTER, $
                       YSIZE=baseYSize)
           label3 = WIDGET_LABEL(labelBase, VALUE = 'Longest Label Name')
 
   ;Create a subBase to hold all of the buttons
   ;   Since each button group is a set of exclusive buttons
   ;  each group must be placed in its own base.   
   btnSubBase = WIDGET_BASE(tlb, /COLUMN, /BASE_ALIGN_RIGHT)
      btnBase1 = WIDGET_BASE(btnSubBase, /ROW, /EXCLUSIVE, $
               /BASE_ALIGN_CENTER)
         btn1a = WIDGET_BUTTON(btnBase1, VALUE = 'On')
         btn1b = WIDGET_BUTTON(btnBase1, VALUE = 'Off')
 
      btnBase2 = WIDGET_BASE(btnSubBase, /ROW, /EXCLUSIVE, $
               /BASE_ALIGN_CENTER)
         btn2a = WIDGET_BUTTON(btnBase2, VALUE = 'On')
         btn2b = WIDGET_BUTTON(btnBase2, VALUE = 'Off')
 
        btnBase3 = WIDGET_BASE(btnSubBase, /ROW, /EXCLUSIVE, $
                 /BASE_ALIGN_CENTER)
         btn3a = WIDGET_BUTTON(btnBase3, VALUE = 'On')
         btn3b = WIDGET_BUTTON(btnBase3, VALUE = 'Off')
 
WIDGET_CONTROL, tlb, /REALIZE
 
END


Review on 12/31/2013 MM