CODEWITHSUNDEEP
twitter-bootstrapresponsive-design
yannski
yannski

Reputation: 43

With twitter bootstrap, how to have thumbnail (as in the thumbnail component) have the same height?

You can see here http://twitter.github.com/bootstrap/components.html#thumbnails in the example with a title and a description, if the title or the description of one the cell is much shorter or longer than the other, the whole height of the block will be diminished or increased accordingly.

How to have these block having the same height?

I tried with setting display: table-row on the ul, and display: table-cell on the .thumbnail class, but unfortunately this completely borked the responsiveness of the layout: the image height and width inside the block are not resized automatically any more.

UPDATE: setup a demo of the problem on jsfiddle http://jsfiddle.net/kwBuW/7/

Upvotes: 4

Views: 2276

Answers (1)

rochejul
rochejul

Reputation: 56

Maybe you can fix the height div which has got the thumbnail class. Like:

<div class="thumbnail" style="height: 400px;">

If you want the same height for every content, I think you must write a JavaScript which will fix it, after the DOM ready of course. Like:

var max = 0, jThumbnails = $("ul.gallery div.thumbnail");
jThumbnails .each(function(index, elt){
    max = Math.max(max, $(elt).height());
});
jThumbnails.setHeight(max);

Upvotes: 4

Related Questions