CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kyle Brown
Kyle Brown

Reputation: 303

How to dynamically put buttons on the corners of different size images? CSS

I have a variety of different size images that I am overlaying a button on the top left and top right corners.

The left button is fine because the images are left justified, but the right button is inconsistent.

In Chrome, the button appears on the top right corner of the image (correct) in IE, the button appears on the top right of the containing div (incorrect).

See attached, any ideas?

HTML:

<div class="center-block results">
   <img src="../assets/dataworks/img/card-test.png" class="img-responsive draggable" />
   <div class="resultOptions">
      <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
      <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
   </div>
</div>

CSS:

.results {
   display: inline-block;
}

.resultOptions {
   position: relative;
   display: block;
   width: 80%;
}

.resultOptions i {
   position: relative;
   padding: 5px;
   margin-top: -120px;
}

IE:

Chrome:

enter image description here

Upvotes: 2

Views: 716

Answers (5)

mattstache
mattstache

Reputation: 135

I would use absolute positioning on the buttons. The image will fill the width of the wrapping div which is positioned relatively, then just position the buttons absolutely with left:0 (or whatever) and right:0. Right now you have them floated via pull-left and pull-right. You will need to position the wrapper relatively to make the absolutes work correctly. See my codepen.

<div class="center-block results">
  <img src="http://via.placeholder.com/350x150" class="img-responsive draggable" />
  <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
  <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>

.results {
   display: inline-block;
   position:relative;
}

.resultOptionBookmark, .resultOptionInfo {
   position: absolute;
   padding: 5px;
   top:0;
}

.resultOptionBookmark{
  left:0;
}

.resultOptionInfo{
  right:0;
}

Upvotes: -1

hungerstar
hungerstar

Reputation: 21725

Use absolute positioning inside an a relative positioned parent. Trying to shove things around with negative margins and such can be error prone.

body {
  margin: 0;
  display: flex;
}

.group {
  margin: 10px 5px;
  position: relative;
}
.options .option {
  position: absolute;
  width: 20px;
  height: 20px;
}
.options .bookmark {
  top: 5px;
  left: 5px;
  background-color: rebeccapurple;
}
.options .info {
  top: 5px;
  right: 5px;
  background-color: indianred;
}
<div class="group">
  <img src="https://placehold.it/200x300/fc0">
  <div class="options">
    <span class="option bookmark"></span>
    <span class="option info"></span>
  </div>
</div>

<div class="group">
  <img src="https://placehold.it/300x300/fc0">
  <div class="options">
    <span class="option bookmark"></span>
    <span class="option info"></span>
  </div>
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115285

Position the icon container absolutely over the image and the align the icons how you want.

.results {
  display: inline-block;
  position: relative;
}

.resultOptions {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}

i {
  margin: .5em;
  color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="center-block results">
  <img src="http://www.placebacon.net/400/200?image=0" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>

<div class="center-block results">
  <img src="http://www.placebacon.net/250/210?image=2" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 106018

as commented earlier: the duo : relative/absolute and text-align-last can be used together.

.results {
  display: inline-block;
  position: relative;
}

.resultOptions {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  right: 0.5em;
  text-align-last: justify;
  color:blue;
  ;
}
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<div class="center-block results">
  <img src="http://lorempixel.com/150/150" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>
<div class="center-block results">
  <img src="http://lorempixel.com/120/150" class="img-responsive draggable" />
  <div class="resultOptions">
    <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
    <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
  </div>
</div>

Upvotes: 0

Manuel Torre
Manuel Torre

Reputation: 77

I think that you are trying the wrong way. You should try to handle this by using the position css property. See https://www.w3schools.com/css/css_positioning.asp

for your right top icon
.resultOptions-left {
   position: absolute;
   top:0px;
   right:0px;
}
for your left top icon
.resultOptions-right {
   position: absolute;
   top:0px;
   left:0px;
}

This should place that div on the top right corner of It's first relative parent

Upvotes: -1

Related Questions