Bootstrap collapsing panels overlap each other when I use Masonry

Question

I have the next page:

    $(function () {
        var container = document.querySelector('#PanelContainer');
        var msnry = new Masonry(container, {
            itemSelector: '.selector-class',
            isAnimated: true,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }   
        });
        $(".spoiler-trigger").click(function () {
            $(this).parent().next().collapse('toggle');
        });
    })

All looks perfect but when the user tries to expand any panels that overlaps others. How can I make to Masonry recalculates and smooth updates panels' locatons?
P.S. I am a noobie in JS.

ADDED
I set listeners for Bootstrap events:

$(document).on('hidden.bs.collapse', function () {
    msnry.layout();
});
$(document).on('shown.bs.collapse', function () {
    msnry.layout();
});

And my layout began to update self but if it has a wrong behavior for expanding. Now, the panel expanded and after it calls layout updating but I need to make it before.

penuts · Accepted Answer

Hopefully this can help, i got this working, but only when using col-XX-[3/6/12] (due to the requirement on width: being a nice %age)

It's a tad messy, but functional.

things worth changing/noting:

to get around the layout change on collapse/expand, the JS has a setTimeout that runs on the update; in production, or especially for slower animated expand/collapse sequences, i imagine a better solution would need to be found. but for animations less than 100ms, i reckon you'd get away with this.

On the CSS, if you used any bootstrap column bigger than xs, you'd need to adapt the css grid-item[-6,-12] to match the col rules for changing width % with screen size.

Mostly the bootstrap column rules take precedence, so things dont get too wrecked.

[NB: my .click event is bound to the text header on the panel, not the panel header div]

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,

});

$('.panel-heading').click(function () {
	setTimeout(function() {
		$('.grid').masonry('layout');
	}, 300);
});

.grid-sizer, .grid-item {width: 25%;}

.grid-item--width-6 { width: 50%;}

.grid-item--width-12 { width: 100%;}

/* NOT required to work,it 
helps demo whats going on */
.panel-body {
	height: 200px;
}

Bootstrap collapsing panels overlap each other when I use Masonry

Answers (1)

things worth changing/noting:

Related Questions