Issue with row detection

[rtpHarry]

I have experienced a strange issue while setting this up. I made a jsfiddle and while I was trying to extract it I figured out a workaround to it but its not going to solve my problem in the medium term.

The issue is that when the page first loads all the boxes are the same height; the equal heights works but the row detection isn't working. Upon resizing the browser screen it triggers the row detection and the rows resize correctly.

The fiddle below shows the issue. As I was trying to solve it I added in various things, adding in a separate row for every second item, changing the class names so floats, etc weren't applied, eventually putting in data-mh annotations to the items but nothing solved the problem:

http://jsfiddle.net/rtpHarry/6mudcbuc/9/

It turned out that while I was moving it across I hadn't brought over the startup JS line. Without the JS it correctly deduces the rows:

http://jsfiddle.net/rtpHarry/6mudcbuc/8/

But even without the .row tags or the data-mh it still fails to do row detection until you resize the browser:

http://jsfiddle.net/rtpHarry/6mudcbuc/11/

This has solved my problem for today but I am keen to find a solution to the JS startup method because the ultimate plan is to pull these boxes in via data from a json feed and generate them on the fly so they won't exist when your data attribute auto-startup code runs.

Any thoughts?

[liabru]

It looks like the reason is that the row detection isn't working correctly when the elements are hidden.

E.g. if the menu is visible before you apply:

$('.dropdown-menu').css('display', 'block');
$(".yamm .thumbnail").matchHeight();

It seems to work.
So there does seem to be a problem with the code for handling hidden elements.

I'll look at fixing this, before then you have two options:

• update matchHeight on the "browse" button click event, just before the menu shows (use the _update method)
• apply matchHeight before hiding the menu on page load

Hope that helps.

[rtpHarry]

Thanks for the feedback. Just wanted to check in and say based on your advice I did get it working satisfactorily. Because this was being used inside a Bootstrap 3 navbar I hooked into the opening event and updated it like this:

    $('.yamm .dropdown').on("show.bs.dropdown", function() {    
        $.fn.matchHeight._update();     
    })

[liabru]

Great!

I've got a fix for this nearly ready to go, so when I get time I'll push it and update this thread.

[liabru]

I've just pushed a fix for this in the latest master version.

If you have time it would be cool if you could try it (disable your previous fix temporarily first).

[rtpHarry]

Hey I tried out your new build and it has resolved the issue that I was seeing. Good work!

http://jsfiddle.net/rtpHarry/6mudcbuc/14/embedded/result/

(notice the _update() is disabled now on line 26 of the js)

[liabru]

Great, thanks for logging this!