CODEWITHSUNDEEP
javascriptjquery
user13286
user13286

Reputation: 3075

Equal height columns per row

I am using Bootstrap on my site and I have added some jQuery to make each column the height of the tallest column. This works alright, but the problem is that the height is not row specific. So the height will just be set to the tallest element throughout the entire page. How can I change this code to make it so that each element in a row is set to the tallest element in that same row only?

$(function() {
  function equalHeight(group) {
      var maxHeight = 0;
      group.each(function () {
          $(this).removeAttr('style');
          maxHeight = Math.max(maxHeight, $(this).height());
      });
      group.css({ height: maxHeight + 'px' });
  }
  equalHeight($('.equal'));
});
.equal {
background:yellow;
margin-bottom:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-sm-3 equal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="col-sm-3 equal">
    Donec consequat malesuada sapien sit amet lacinia. In faucibus, felis nec condimentum volutpat, ante felis dictum dui, eget tincidunt arcu risus id nisl. Suspendisse faucibus neque at massa elementum, id porta nunc semper.
    </div>
    <div class="col-sm-3 equal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum odio velit, in tempus purus posuere eget.
    </div>
    <div class="col-sm-3 equal">
    <strong>ALL HEIGHTS ARE BASED ON THIS COLUMN: </strong>Sed sodales augue sed est vulputate gravida. Mauris rutrum, felis vitae tincidunt fermentum, ipsum ipsum porta felis, quis cursus tortor metus in sapien. In at eros malesuada, facilisis enim eget, volutpat tellus. In accumsan odio in urna suscipit auctor. Integer iaculis leo sit amet felis consectetur sodales. Nulla lobortis nec justo at fermentum. Donec efficitur in est eu volutpat. Etiam sed felis id lorem pretium auctor. Aenean placerat, neque ac posuere feugiat, justo ex gravida ante, et semper diam velit eu dolor. Duis efficitur maximus odio, viverra imperdiet odio dictum vitae.
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3 equal">
    Cras dignissim eget enim et auctor.
    </div>
    <div class="col-sm-3 equal">
    Mauris massa quam, tincidunt in nulla gravida, viverra vulputate est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="col-sm-3 equal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="col-sm-3 equal">
    Nulla venenatis pharetra sapien, et lobortis diam commodo rutrum. Sed varius sit amet lectus ac condimentum. Maecenas lacinia ligula eget ultricies dictum. Proin a eros velit. Sed facilisis vehicula mauris, nec egestas augue vulputate ac.
    </div>
  </div>
</div>

Upvotes: 1

Views: 775

Answers (2)

koralarts
koralarts

Reputation: 2112

CSS Solution:

You can set the parent div to display: flex. In this case the CSS will look like so:

.row {
  display: flex;
}

Example: https://jsfiddle.net/koralarts/e50wonqz/

Javascript Solution:

In the Javascript solution, I looped through each of the rows with the class equal as opposed to looping through the columns with said class.

This will make sure that our scope is within the row instead of all columns available.

function equalizeHeight(group) {
  var maxHeight = 0;
  group.each(function(index) {
    var divHeight = $(this).height();
    if(divHeight > maxHeight) {
      maxHeight = divHeight;
    }
  });

  group.css('height', maxHeight);
}

This function can be called like so:

$('.equal').each(function() {
  equalizeHeight($(this).children('div'));
});

https://jsfiddle.net/koralarts/e50wonqz/4/

Upvotes: 2

sefa
sefa

Reputation: 504

There is a plugin in Jquery

https://github.com/mattbanks/jQuery.equalHeights check this out.

$('.equal').equalHeights();

Upvotes: 1

Related Questions