Masonry and tabs conflict issue

[mintdesigner]

I am facing a strange conflict issue when using masonry inside tabs. If masonry is not inside the active tab on page load, masonry doesn’t work properly. It starts working perfectly fine on resizing the browser or refeshing the page. I feel there is something conflicting with tabs but I am not able to figure out what is it. Masonry is inside Favourites tab. Any help would be greatly appreciated. Thanks.

Link : http://sdaworks.com/web/buildofy-web/people-dashboard-beliefs.html

[jekkilekki]

Here’s a post dealing with this issue in BootStrap (and a fix): http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

I’m still working out how to get it working in Foundation.

Here’s some sample code dealing with Isotope (a similar script): https://github.com/desandro/masonry/issues/665

This one ALMOST works for me – but only when the tabs are “refreshed” (i.e. it doesn’t work when I click the tabs initially, but if I load the developer tools (F12) the tabs reload and Masonry works. Working on figuring this out now.

[jekkilekki]

Got it working in Foundation. Here’s a CodePen sample: http://codepen.io/jekkilekki/pen/YywQag

Easier than I thought. Basically, rerun Masonry every time a different Tab is clicked:

// Reinitialize masonry inside each panel after the relative tab link is clicked - 
$('.tab-title a').on('click', function() {
  // do async to allow menu to open
  setTimeout( function() {
     $('.masonry-container').masonry({
    itemSelector: '.masonry-item'
     }, 500);
  });
});

[Author]

Posts