Vertical Alignment in WijRadio & WijCheckbox

June 11 2013

Wijmo jQuery widgets are often used in public-facing form based web applications to create a smooth and engaging user experience. The WijRadio and WijCheckbox widgets are used to select different kinds of user input. These two can be defined as:

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one option. In other words, clicking a non-selected radio button will de-select whatever other button was previously selected in the list.
Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.

However, if you are displaying an image along with WijRadio and WijCheckbox widgets then the "vertical-align" property does not work. This is a limitation of these widgets. In this blog, we would see how we can overcome this limitation and render WijRadio/WijCheckbox vertically aligned to the top/middle of an image. There are two way to achieving the desired requirement: 1. We can set the css of WijRadio and WijCheckbox widgets like below:

/\*Css modification for WijRadio\*/  

/* For top vertical align, we just need set the top position to zero. */  
  #topVertical .wijmo-wijradio .wijmo-wijradio-box {  
        top: 0px;  
  }  

/* For middle vertical align, we should adjust the top position to a proper value.  
   And this value depends on the actual height of the wijradio control. */  
   #middleVerticalSmall .wijmo-wijradio .wijmo-wijradio-box {  
        top: 1px;  
    }  

   #middleVerticalBig .wijmo-wijradio .wijmo-wijradio-box {  
        top: 31px;  
    }  

/\*Css modification for WijCheckbox\*/  

/* For top vertical align, we just need set the top position to zero. */  
   #topVerticalCheckbox .wijmo-checkbox .wijmo-checkbox-box {  
        top: 0px;  
    }  

/* For middle vertical align, we should adjust the top position to a proper value.  
   And this value depends on the actual height of the wijcheckbox control. */  
   #middleVerticalSmallCheckbox .wijmo-checkbox .wijmo-checkbox-box {  
        top: 1px;  
    }  

   #middleVerticalBigCheckbox .wijmo-checkbox .wijmo-checkbox-box {  
        top: 31px;  
   }

We can create a method that calculates the accurate top position of the wijradio and wijcheckbox control for the middle alignment. Here is the code for same:

// This method calculates the accurate top position of the wijradio and wijcheckbox control for the middle alignment.  
function setMiddleAlignPosition() {  
$('.wijmo-wijradio').each(function () {  
   var controlHeight, radionElement, radionElementHeight, topPos;  
    controlHeight = $(this).outerHeight();  
    radionElement = $(this).children('.wijmo-wijradio-box');  
    radionElementHeight = $(radionElement).outerHeight();  
    topPos = (controlHeight - radionElementHeight) / 2;  
    radionElement.attr('style', 'top:' + topPos + 'px');  
 });  

$('.wijmo-checkbox').each(function () {  
  var controlHeight, radionElement, radionElementHeight, topPos;  
  controlHeight = $(this).outerHeight();  
  radionElement = $(this).children('.wijmo-checkbox-box');  
  radionElementHeight = $(radionElement).outerHeight();  
  topPos = (controlHeight - radionElementHeight) / 2;  
  radionElement.attr('style', 'top:' + topPos + 'px');  
});  
}

You may also refer to this sample for implementation.

MESCIUS inc.