mardi 24 octobre 2017

HTML: Checkbox doesn't get clicked after adding it to bottom of an anchor container

I am trying to add a new checkbox to a search result page of a travel website with result cards defined as an anchor tag inside a div. Something like below:

<div class="cards">
    <a href="some link">Some Information</a>
    <div id="price"> Price</div>
    .....
</div>

Now, this anchor tag link is over entire cards div. I am trying to add a checkbox within this card div to the bottom right but somehow when I try to tick the checkbox, the Some Information link gets clicks as it is overlaid to entire card.

Below is the code for my checkbox:

<div id="myContainer">
  <input type="checkbox" name="myCheckbox" id="myCheckbox" value="red">
  <label for="myCheckbox_01_item" class="text">Add to Compare</label>
</div>

And the CSS:

  @CHARSET "UTF-8";

/* Main Classes */
.text{
    position: relative;
    /* margin-top: .70588235rem; */
    color: #3e3e3e;
    margin: 13px 11px;
    float: right;
}
#myCheckbox{
    transform: scale(2);
/*  margin: 10px; */
}

#myContainer {
    outline: black dashed 1px;
    width: 238px;
   background-color: #ffcb00;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-top: auto;
}


#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) {
    display: inline-block;
    width: 15px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 12px 13px;
    float: left;
}

#myContainer input[type="checkbox"][name="myCheckbox"]:checked  {
    display: inline-block;
    width: 15px;
    height: 25px;
    border: black solid 1px;
    background: #00355f;
    margin: 12px 13px;
    float: left;
}

#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    line-height: 18px;
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

Also, if I am keeping it in the bottom left, it appears below the card div box and works fine. PFA the two images to give you the idea about the UI.

Left_Checkbox

Right Checkbox:

Right_checkbox




Aucun commentaire:

Enregistrer un commentaire