CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
BarclayVision
BarclayVision

Reputation: 863

align image on right of bootstrap list-group

Need the image to fill top to bottom on right side of list-group. I have several css overrides in my style section, and can't seem to figure out what I'm missing? not sure if giving a fixed height width is the way to go or how to have it fill the set list height.

attached image shows the current alignment which seems to be below the label?

some list will already drop to line below.

enter image description here 

    <style> 

.checkbox label:after, 
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}

.bv-bg-lightpink {
    background-color: lightpink;
    pointer-events: none;
    cursor: default;
}

.bv-bg-lightblue {
    background-color: lightblue;
    pointer-events: none;
    cursor: default;
}

.bv-bg-lightyellow {
    background-color: lightyellow;
    pointer-events: none;
    cursor: default;
}

.bv-bg-lightgreen {
    background-color: lightgreen;
    pointer-events: none;
    cursor: default;
}

.bv-bg-yellow {
    background-color: yellow;
    pointer-events: none;
    cursor: default;
}

.bv-bg-red {
    background-color: red;
    pointer-events: none;
    cursor: default;
}

.bv-not-active {
   pointer-events: none;
   cursor: default;
}

.MyDrugPix img {
    width: 40px;
    height: 40px;
    float:right
}

</style>

HTML:

<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;">
        <div class="checkbox">
            <label style="font-size: 1.5em">
             ACETAMINOPHEN
            </label>
            <div class="MyDrugPix" style="padding-right: 0px;"><img src="/images/IMG_0741.JPG" alt="DRUGS" class="img-responsive"></div>
        </div>
    </a>

Upvotes: 1

Views: 2121

Answers (1)

Naren Murali
Naren Murali

Reputation: 56297

Here is a CSS only solution for your problem.

Basically I set the div with the class checkbox as width:100%.

Then I make the div of the image, as display:inline-block so that it does not take up the whole width. Then set it to the right using the property float:right;, but this will cause the parent to not detect the elements height, to solve this I have added a clearfix. Refer here for more about clearfix.

CSS:

.MyDrugPix {
  padding-right: 0px;
  display: inline-block;
  float: right;
}

.checkbox {
  width: 100%;
}

Clearfix:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}


/* IE6 */

*:first-child+html .clearfix {
  zoom: 1;
}


.checkbox label:after,
.radio label:after {
  content: '';
  display: table;
  clear: both;
}

.checkbox .cr,
.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
}

.radio .cr {
  border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 20%;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}


/*My changes*/

.MyDrugPix {
  padding-right: 0px;
  display: inline-block;
  float: right;
}

.checkbox {
  width: 100%;
}

/*Clearfix for floating elements*/

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}


/* IE6 */

*:first-child+html .clearfix {
  zoom: 1;
}


/* IE7 */
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;">
  <div class="checkbox clearfix">
    <label style="font-size: 1.5em">
             ACETAMINOPHEN
            </label>
    <div class="MyDrugPix"><img src="http://via.placeholder.com/50x50" alt="DRUGS" class="img-responsive"></div>
  </div>
</a>

here is a CSS3 solution if you are open to it.

Using flex properties we can do the same by setting 3 properties alone!

CSS3

.checkbox {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
} 


.checkbox label:after,
.radio label:after {
  content: '';
  display: table;
  clear: both;
}

.checkbox .cr,
.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
}

.radio .cr {
  border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 20%;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}

.checkbox {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;">
  <div class="checkbox">
    <label style="font-size: 1.5em">
             ACETAMINOPHEN
            </label>
    <div class="MyDrugPix" style="padding-right: 0px;"><img src="http://via.placeholder.com/50x50" alt="DRUGS" class="img-responsive"></div>
  </div>
</a>

Upvotes: 2

Related Questions