Place the Input to the Right of Label When Using Checkbox Styling in the Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Important

Deprecated. This approach is applicable only on versions before Kendo UI R1 2020.

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 required 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>