Clicking on a click box over a full div link?

Question

I have list of to-do tasks, which are made as divs, using the stretched link bootstrap class. Click on the each of the to-do task, opens up a modal with detailed view. However, those divs (to-dos) have checked button which needs to be able to clicked. Right now when you click the checkbox, modal opens and it can't be checked.

Can you help me with this issue?

<div>
  <div>
    <ul class="list-unstyled list-inline">
      <li class="list-inline-item"><div class="checkbox checkbox-success checkbox-single"><input type="checkbox"><label></label></div></li>
      <li class="list-inline-item">Name</li>
    </ul>
  </div>
  <a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>

Ok.. Forget it. I just verified. It depends of your doctype. It's useless if you use html5. https://stackoverflow.com/a/3558200/9359945 — Raphael Deiana, Dec 07 '19 at 23:02
I did try setting z-index to -1, and while the checkbox is clickable now, modal doesn't open on any other area — Petar Brković, Dec 08 '19 at 00:13
@PetarBrković, the answer below should hopefully get you what you're looking for — Akber Iqbal, Dec 09 '19 at 00:35

score 0 · Answer 1 · answered Dec 09 '19 at 00:33

There are 2 options based on information in the question:

either put just the checkbox on a higher z-index than the modal... I did this for the first checkbox where you can check/un-check the checkbox but can't touch the text in the label
or put the checkbox and it's label on a higher z-index than the modal... I did this for the second checkbox where you can select the label text and check/un-check the checkbox
Added a light red color so that it is easy to observe the behavior...

working snippet below:

.myCheckbox,
.complete-checkbox-clickable {
  position: relative;
  z-index: 21;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(238, 149, 149, 0.23) !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div>
  <div>
    <ul class="list-unstyled list-inline">
      <li class="list-inline-item">
        <div class="checkbox checkbox-success checkbox-single">
          <input type="checkbox" class="myCheckbox">
          <label>(this is where you should put the label) </label>
        </div>
      </li>
      <li class="list-inline-item">Name</li>
      <br/>
      <li class="list-inline-item">
        <div class="checkbox checkbox-success checkbox-single complete-checkbox-clickable">
          <input type="checkbox" class="myCheckbox">
          <label>2nd checkbox </label>
        </div>
      </li>
    </ul>
  </div>
  <a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>

Clicking on a click box over a full div link?

1 Answers1