jeudi 30 janvier 2020

What attributes make a checkbox uncheckable? (Bootstrap/AdminLTE)

I have looked here and more widely but cannot find anything on point. This is NOT important but I would like to fix a small problem that I cannot track down and it is irritating me.

I have a checkbox which works fine until I go into the xs media size of Bootstrap 3 display. I can do a quick fix warning not to use this in xs (this is a very rough proof-of-concept site and I have a million important things to do).

Using Chrome DevTools I have tried highlighting various bits and bobs but found nothing. So

1) I have looked for hidden, disabled and readonly: Is there any other CSS attribute that would cause a bit of code become unclickable?

2) (and I apologise in advance as I know this is a go-do-the-work-yourself point) when I am hunting for these attributes should I be looking at the checkbox code and expanding out? In DevTools the "Elements" panel has the CSS panel next to it and I am "filtering" on the above attributes. Question: If I select the checkbox would that show the influences on it or do I have to keep going up through the DOM looking at all the enclosing layers (I think I have to).

The code is NOT relevant to the question I am asking but ...

      <div class="box box-info box-solid collapsed-box" id="randomDayBox">
        <div class="box-header with-border">
          <!-- first span was visible-xs second span hidden xs -->
          <h3 class="box-title"><span class="">Rnd. days</span> <span class="">Random days</span>
          </h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" type="button" data-widget="collapse"><i class="fa fa-plus"></i>
            </button>
          </div>
        </div>
        <div class="box-body">
          <div class="row ">
            <div class="col-xs-12  ">
              <div class="checkbox" >
                <label>
                  <input type="checkbox" name="randomDay" id="randomDayCheck" value="1" class=""> Use random days?
                </label>
              </div>
            </div>
            <div class=" col-xs-12 dimNoTickDays">

enter image description here The checkbox on the left does not work at "xs" size while the one on the right does and both work fine from "sm" size upwards.

There is jQuery code floating around and the whole build of AdminLTE 2.4 (which is not perfect!) I could list this all but all I am after is what could possibly make a checkbox uncheckable and a little guidance on the CSS tool in DevTools.

Grateful for any help available.




Aucun commentaire:

Enregistrer un commentaire