How do I increase the target size of a custom-checkbox in bootstrap 4?

Refresh

April 2019

Views

3 time

0

I'm using forms inside list items in bootstrap 4 and have been using <a href class="stretched-link"> and a small event handler inside my form controls to make the entire <li> clickable, instead of just the small label and checkbox. stretched-link increases the target to the nearest relatively positioned item.

Unfortunately compared to the standard controls the nicer custom-checkbox uses relative positioning and breaks stretched-link so that the click target is only the label text.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<ul class="list-group list-group-flush">
  <li class="list-group-item">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>
  </li>
</ul>

I can disable relative positioning on the custom control, but that breaks is formatting. How should I make the entire <li> control the checkbox?

0 answers