Edit this page

Place Input to the Right of Label when Using Checkbox Styling

Environment

Product Progress Kendo UI Grid
Operating System All
Browser All
Browser Version All

Description

When I use the checkbox styling as shown in this demo and if I move the input element to the right of the label tag, the example stops working.

How can I place move the input element to the right of the label tag in the Grid when I use checkbox styling?

Solution

You are requires to place the checkbox first and the label tag second, so that the label tag can be styled, based on the checkbox state.

.k-checkbox:checked + .k-checkbox-label {}

However, you can have more than one label per input. Leave the second k-checkbox-label blank, and place the text in a different label tag before the checkbox:

<div>
  <h4>Choose Extra Equipment</h4>
  <ul class="fieldlist">
    <li>
      <label for="eq1">Rear side airbags</label>
      <input type="checkbox" id="eq1" class="k-checkbox" checked="checked">
      <label class="k-checkbox-label" for="eq1"></label>
    </li>
    <li>
      <label for="eq2">Leather trim</label>
      <input type="checkbox" id="eq2" class="k-checkbox" checked="checked" disabled="disabled">
      <label class="k-checkbox-label" for="eq2"></label>
    </li>
    <li>
      <label for="eq3">Luggage compartment cover</label>
      <input type="checkbox" id="eq3" class="k-checkbox">
      <label class="k-checkbox-label" for="eq3"></label>
    </li>
    <li>
      <label for="eq4">Heated front and rear seats</label>
      <input type="checkbox" id="eq4" class="k-checkbox">
      <label class="k-checkbox-label" for="eq4"></label>
    </li>
    <li>
      <label for="eq5">Dual-zone air conditioning</label>
      <input type="checkbox" id="eq5" class="k-checkbox">
      <label class="k-checkbox-label" for="eq5"></label>
    </li>
    <li>
      <label for="eq6">Rain sensor</label>
      <input type="checkbox" id="eq6" class="k-checkbox">
      <label class="k-checkbox-label" for="eq6"></label>
    </li>
    <li>
      <label for="eq7">Towbar preparation</label>
      <input type="checkbox" id="eq7" class="k-checkbox" disabled="disabled">
      <label class="k-checkbox-label" for="eq7"></label>
    </li>
  </ul>
</div>
<style>
  .fieldlist {
    margin: 0 0 -1em;
    padding: 0;
  }

  .fieldlist li {
    list-style: none;
    padding-bottom: 1em;
  }
</style>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy