jquery-match-height not working on first row

Question

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 1

Default option is by row - https://github.com/liabru/jquery-match-height#options

$('.article-box .well').matchHeight({ 
     byRow: 0
});

There you go. :)