Equal heights per row

Question

I would like to set equal heights on all items. I am currently using this example:

   var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);

Based on this question Same height column bootstrap 3 row responsive

I would like to apply this on a per row basis, as some heights are being set too high for rows that do not need so be set.

Does it have to be done by jQuery? Because `flexbox` is [widely supported](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) since then (2014). — Roy, Mar 09 '16 at 12:14
Check @Popnoodles answer [here](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Watchmaker, Apr 26 '16 at 12:29

score 3 · Answer 1 · answered Mar 09 '16 at 12:13

3

well its possible with css also if you use display:flex on parent div then all the inner div will come with same height in same row but if its need of jquery then use this

CODE

var maxHeight;
$(".well").each(function(){
  if($(this).height > maxHeight){
    maxHeight = $(this).height;// will assign the highest height to this
  }
})
$('.well').css('height',maxHeight );

All the div will be of same height according to the highest size div

answered Mar 09 '16 at 12:13

Gaurav Aggarwal

9,809
6
36
74

it should definately work i am using it on so many places so please share your codes – Gaurav Aggarwal Mar 09 '16 at 12:26
Thanks - Here is an example of it not working for me https://jsfiddle.net/DTcHh/18022/ – Mar 09 '16 at 12:39
well sorry for my silly mistakes in previous code here is the new link and working file https://jsfiddle.net/DTcHh/18027/ – Gaurav Aggarwal Mar 09 '16 at 12:55
Thanks but this does exactly the same was what my code currently does. It isn't on a per row basis. Vector's answer does what I want https://jsfiddle.net/DTcHh/18026/ but I need to modify it so it's responsive which is why i wanted a simpler solution. – Mar 09 '16 at 13:06

Kevin Lynch · Accepted Answer · 2016-03-09T12:52:22.537

For examples sake Lets assume you are out putting your html via a php loop (if not then you can simply loop though the elems assigning a class) same principle applies.

PHP example outputting html

    <?php foreach($array as $k => $v): ?>
        <?php if($k % (4) == 0) $class++; ?>

        <div class="row-num-<?php echo $class ?>">
            // div content variable height
        </div>
    <?php endforeach; ?>

jQuery Setting Equal Height per row using your existing code

        var totalFrames = $('div[class*=row-num-]').length;
        for ( var i = 1, l = totalFrames; i < l; i++ ) {
            var heights = $(".row-num-"+i).map(function() {
                    return $(this).height();
                }).get(),

                maxHeight = Math.max.apply(null, heights);

            $(".row-num-"+i).height(maxHeight);
        }

This assumes your row is 4 elems wide. You can set this or dynamically calc it depending on your use. In the jQuery we loop through all elems with a class like row-num- then we target each one setting the height. These will have the same class every four elems. It continues until the current count of this class name has been reached.

DEMO https://jsfiddle.net/DTcHh/18026/

This works flawlessly - The only issue I have is that it isn't responsive as the columns will not always be 4 wide. — , Mar 09 '16 at 12:40
This can be responsive. That number can be dynamically calculated. You could also put this in a function and invoke on window resize. I don't know your set-up, are the columns going full width of the page or just contained within a small div within the page. My code will need tailored to your needs. It's a proof of concept example. — Kevin Lynch, Mar 09 '16 at 12:47

Equal heights per row

2 Answers2