Garreth 00 Garreth 00 - 6 months ago 45
jQuery Question

jquery-match-height not working on first row

Im using jquery-match-height plugin on my website.

I can't understand why the plugin does not work on the first row. It seems like the plugin is trying to output the style height, but it is empty on the first row. Second row is working fine.

html

<div class="container">

<div class="row article-box-list">
<div class="col-xs-12 col-md-8 article-box">
<a href="#"><img src="http://dummyimage.com/768x410/000/fff" alt="" class="img-responsive"></a>

<div class="well well-white">
<h2><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
</div>
</div>


<div class="col-xs-12 col-md-4 article-box">
<a href="#"><img src="http://dummyimage.com/768x853/000/fff" alt="" class="img-responsive"></a>

<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
</div>
</div>
</div><!-- /first-row-->




<div class="row article-box-list">

<div class="col-xs-12 col-md-4 article-box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>

<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">More</a></p>
</div>
</div>



<div class="col-xs-12 col-md-4 article-box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>

<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p class="ingress">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a href="#">More</a></p>
</div>
</div>


<div class="col-xs-12 col-md-4 article-box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>

<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet, consectetuer. <a href="#">More</a></p>
</div>
</div>



</div><!--/ last-row-->


</div>


js

$(function() {
$('.article-box .well').matchHeight();
});


My bootply: view (does not seem to be working atm)

My jsfiddle: view

Anyone know how I can fix this?

Answer

Samus's answer is actually quite close but given that what you want is to:

  • match the height's of the .article-box .well elements within each row
  • have differing matched heights for each row

And the fact that the plugin simply makes the promise:

matchHeight makes the height of all selected elements exactly equal

The solution is to select the elements within each row individually and apply the plugin to each collection separately like so:

$(function() {
    $('.row').each(function(i, elem) {
        $(elem)
            .find('.article-box .well')   // Only children of this row
            .matchHeight({byRow: false}); // Row detection gets confused so disable it
    });
});

You can see this at work in this update to your jsFiddle. You'll notice the wells in the first row and the wells in the second one are a different height but the same within each row if you inspect them with your browser's dev tools.

Comments