CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Takács Zoltán
Takács Zoltán

Reputation: 117

Position not working in bootstrap col-md-3 divs

I use this plugin, to turn all .item divs into the same height.(to the high-est) It works fine, if i view it in the console, all .item divs are 402px height. These .item divs are posotion relative.

On the picture below, you can see a text input, and an add to cart button. enter image description here

The last div is higher, beacuse the image in that is higher.

How can i get the number input and the add to cart button into the divs bottom? These are in a .input-group div. If i give the .input group div position absolute, the .item div will lose of his height, it will be about 360px, from 402 px.

    <div class="col-md-3 main_item_div"> <a href="/termek/62/far-cry-primal-jatek-pc" title="Far Cry Primal Collectors Edition PC" class="main_item_img_to_link"> <img src="/images/item/thumb_1880a74a-c52e-4261-8763-636e5bb04089_1.f19920f7654d3af34771dc286d34b9ec-6042638989.jpeg" alt="Far Cry Primal Collectors Edition PC" class="img-responsive"> </a>
  <h2 class="main_item_title"><a href="/termek/62/far-cry-primal-jatek-pc" title="Far Cry Primal Collectors Edition PC" class="main_item_title_to_link">Far Cry Primal Collectors Edition PC</a></h2>
  <span class="main_item_cikkszam">Cikkszám: DT79WYBBM</span> <span class="main_item_kiszereles">Kiszerelés: Darab</span> <span class="main_item_kiszereles"><b>Készleten</b></span>
  <input type="hidden" value="0" id="MinimumOrder62">
  <span class="main_item_price_2">13.900 Ft,-</span><span class="main_item_price_3">Akciós ár: 12.900 Ft,-</span><span class="main_kedvezmeny_mertek_szazalek">-7 %</span>
  <div class="input-group item_buttons_div">
    <input type="text" id="item_darabszam62" class="form-control item_darabszam" value="1">
    <span class="input-group-btn">
    <button onClick="add_to_cart(62);" class="btn btn-secondary item_add_to_cart" type="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Kosárba</button>
    </span></div>
</div>

The official css for the bootstrap .input-group:

.input-group {
    position: relative;
    display: table;
    border-collapse: separate
}

If i write the relative to absolute, and bottom:0, the .item div will loose about 40-50px of his height. Img of this below..

.input-group {
    position: absolute;
    bottom:0;
    display: table;
    border-collapse: separate
}

enter image description here

Updates 2016 12 11:

Now i dont use the equal height plugin, and i added the product title a fix 55px height. Sould i put this into a media query? Because i only need this height on monitors, on mobile, the divs are under each other... enter image description here

And there is one more step, what sould i do whit the images? The image is inside a link, and it has an img-responsive class. When uploading a product, the thumb image can be a fix size, 200x200, 350x350....or rectangle, 200x150...

How can i position theese images vertical center in the link, and, can i give max or fix height for the link only in monitor view, not mobile?

enter image description here

Product title css:

    .main_item_title {
    line-height: 18px;
    margin-top: 7px;
    margin-bottom: 10px;
    font-size: 15px;
    height:55px;
    font-weight: 700;
}
.main_item_title_to_link {
    color: #3c4d5a;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -ms-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s;
}

Product thumb img css: - now, it doesnt have any css, only the img has an img-responsive class.

Upvotes: 1

Views: 844

Answers (2)

Vaibhav Shettar
Vaibhav Shettar

Reputation: 810

i think there only two ways:

1.you have to set max-height property to your images. so that images height are same.

  1. for larger column use scroll vertical

overflow-y: scroll;

Upvotes: 0

ashish singh
ashish singh

Reputation: 6914

you can do 

position: absolute;
bottom: 0;

and to solve problem that some part is behind .input-group

you can do padding:bottom:50px (50px or height of .input-group)

Upvotes: 0

Related Questions