Bootstrap mega menu and Isotope.js: items get collapsed on page load

Question

I have a mega menu in a Bootstrap navbar, and since content's blocks are different in heights I'm using Isotope to fit them

<ul class="row" id="isotope">
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Auto</a> </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Autocarri</a>
        <ul>
            <li> <a href="#">Autobetoniere</a> </li>
            <li> <a href="#">Cassone fisso e Centinati</a> </li>
            <li> <a href="#">Con Gru</a> </li>
            <li> <a href="#">Frigoriferi</a> </li>
            <li> <a href="#">Mezzi d'opera</a> </li>
            <li> <a href="#">Motrici</a> </li>
        </ul>
    </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Carrelloni - Rimorchi - Semirimorchi</a> </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Dumper</a> </li>
    <li class="isotope-item col-sm-4 col-md-3"> <a href="#">Escavatori</a>
        <ul>
            <li> <a href="#">Escavatori Cingolati</a> </li>
            <li> <a href="#">Escavatori Gommati</a> </li>
        </ul>
    </li>
    ...
</ul>

The problem is that if I open the mega menu all blocks are collapsed on top of each other: here is a fiddle

If I resize the window then they align correctly (aka isotope starts working).
If I force the mega menu opened on page load, they are also aligned correctly

Where am I wrong with this? I can't find a solution Thanks

Answer 1

Found the solution based on this article: http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

var $container = $( "#isotope" );
$( ".dropdown" ).each(function () {
    var $this = $(this);
    $this.on( "shown.bs.dropdown", function () {
        $container.masonry({
            itemSelector: ".isotope-item"
        });
    });
});

http://jsfiddle.net/z4jugbks/2/