Monday, October 1, 2012

a better looking checkbox for zend form element checkbox

Code:

$this->getElement('iagree')->addDecorator('HtmlTag', array('tag' => 'dd', 'class' => 'checkbox'));
$this->getElement('iagree')->addDecorator('Label', array('placement' => 'APPEND', 'class' => 'checkbox', "escape" => false));
//escape to false to prevent from escaping link within the label
//also adding checkbox class to the dd tag and label tag
// and place label to the right of checkbox

Css wise:

dl dd.checkbox {
  margin-left: 175px;
  float: left;
}

dl label.checkbox {
  display: block;
  margin-left: 190px;
  width: auto;
  float: none;
  text-align: left;
  height: auto;
 
}

.zend_form label.checkbox.required {
  padding-left: 12px;
  background-position: left center;
}