Checkbox & Switch

1. Checkbox & Radio

  • Ace admin template has support for pure CSS checkbox and on/off switches.
    This makes it more lightweight and there's no need for an external library.
  • A basic checkbox element has .ace class and a .lbl element follows it:
  • It's always a good idea to wrap checkbox element and the .lbl element inside a label for better click response, except for some cases such as re-styling jqGrid checkboxes (see Notes below)
  • You can use an addtional .ace-checkbox-2 class for another checkbox style:
  • Radio buttons are also styled like checkboxes:

2. Switch elements

  • Switch elements are like checkboxes with a few additional classes:
    1. .ace-switch
    2. .ace-switch-2
    3. .ace-switch-3
    4. .ace-switch-4
    5. .ace-switch-5
    6. .ace-switch-6
    7. .ace-switch-7
  • .btn-rotate makes the bars horizontal:
  • .btn-empty hides the bars:
  • .btn-flat makes the checkbox rectangular:
  • You can have a custom text for switch elements using data-lbl attribute of the .lbl element.
    You should add enough spaces ( ) to adjust your custom text:
  • You can also edit assets/css/less/form/checkbox.less and modify @switch-1-text variables and re-compile LESS files into CSS.
  • Sometimes your text is not adjusted well. In that case you can override the following CSS rules and find the best values: 
    /* for default switch element */
input[type=checkbox].ace.ace-switch + .lbl::before {
   text-indent: -21px;
}
input[type=checkbox].ace.ace-switch:checked + .lbl::before {
   text-indent: 8px;
}

/* or other ones */
input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::before {
   text-indent: -25px;
}
input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::before {
   text-indent: 9px;
}

3. Notes

  • You may face an issue with checkboxes in ASP.NET as there's often a hidden input inserted after the checkbox and therefore our CSS rule which requires .lbl to be inserted immediately after checkbox element, fails:
    Checkboxes won't be displayed here.
    You can remove .ace class to have default browser checkbox or you can use CSS builder tool and enable ASP.NET friendly checkboxes option.
    Please note that your checkbox element should only have one .lbl sibling:
  • It also seems that Rails framework automatically puts a hidden input before the checkbox.
    In some browsers, this may prevent the checkbox from receiving click events if it's inside a label:
    That's because label element should only have one input element which in this is the "hidden" input.
    To fix that you can put "hidden" input after checkbox or associate the label to checkbox with "for" attribute and checkbox "id":
  • Sometimes you have a list of checkboxes inside a parent with scrollbars.
    In that case, it's better to put checkboxes inside a parent with position:relative.
    For example inside a .pos-rel element: 
    
  
    
   
  
    
  
    
   
  
    
  .
  .
  .
  • Sometimes you shouldn't wrap the checkbox and .lbl inside a label.
    For example in jqGrid plugin, when you launch an "edit record" or "new record" dialog, and want to style the checkbox dynamically: 
      form.find('input[type=checkbox]')
      .addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
    Checkbox should not be wrapped inside label because it conflicts with plugin's data upload mechanism.
  • For better vertical alignmnet sometimes you should add .middle class to .lbl element:

4. Options

  • For a slightly larger version of checkbox and radio buttons, you can add .input-lg class to the input element:
  • To add space between checkbox and its label you can use .padding-* class for .lbl element:
    Possible values are .padding-2 .padding-4 ... .padding-16