The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Masonry and tabs conflict issue

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #198272

    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 :


    Here’s a post dealing with this issue in BootStrap (and a fix):

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

    Here’s some sample code dealing with Isotope (a similar script):

    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.


    Got it working in Foundation. Here’s a CodePen sample:

    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() {
        itemSelector: '.masonry-item'
         }, 500);
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.