CODEWITHSUNDEEP
jquery
user5483305
user5483305

Reputation:

Equal heights per row

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.

Upvotes: 0

Views: 2120

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24703

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/

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

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

Upvotes: 3

Related Questions