Masonry Grid broken under quicktabs or Bootstrap tabs

I have the same issue. Not sure if it is related, but the grid also breaks when an exposed filter is selected.

Hey kvyn,

I'm having the exact same issue. Are you able to share the code that helped you get it working?

Cheers, Leah

i have the same problem...

I am having the issue when using quicktabs to show 2 blocks from the same view. The first block renders the masonry correctly, but the hidden quicktabs tab doesn't run the masonry properly. I solved the issue by modifying the quicktabs.js file. I trigger the Drupal.attach behavior on the tab when it is made visible. This runs the masonry.js on the tab once it is visible. This seems to be a decent one line solution.
I wish I could find a simple way to modify the masonry module to make this work for all the cases where it is buggy, but this is just how I fixed the quicktabs problem. I'm sure it occurs in other situations as well.

I inserted this line before the return in Drupal.quicktabs.clickHandler function in quicktabs.js.
setTimeout(function(){Drupal.attachBehaviors(tab)}, 0);

This worked for me:

Drupal.behaviors.quicktabs_masonry = {
    attach: function(context) {
      var $ul = $('ul.quicktabs-tabs:first', context);
      $ul.find('li a').bind('click', function() {
        if($(this).hasClass('quicktabs-loaded')) {
          // Re-run attach scripts when tab changes (so masonry can re-calculate the grid)
          Drupal.attachBehaviors(this);
        }
      });
    }
  };

Hi KarlShea
I have the same issue
Please can you show how did you apply your solution?

The script I posted could go in any JavaScript file that's loaded on the same page as your QuickTabs instance.

Hi !
I'm just taking over maintainance. As part of cleaning the stack of issues, let me close this issue: I will support only 2.x and forthcoming version.
Thanks for comprehension.

Unfortunately this isn't related to v1 only.

And it is happening with Bootstrap tabs too.

If you place a Masonry view in the first tab (shown by default on page load) it will work.
If you put it on any other tab, which requires you to click to show it, it won't: all the items will be overlapped on the left.

I tried implementing this code in my theme script.js file: http://codepen.io/SitePoint/pen/mywEMR/

But it didn't work either :/
See the problem here: http://comprao.it/wear-freaky

@kopeboy: do you create the bootstrap tabs via a particular module or using a shortkey from a theme ? Do you input the code directly in your node article ? Do you embed your view in a template file ?

@Dom.
Yes, I created it using dev version of panels_bootstrap_styles module. Basically the node template is overridden with panels: there is a mini-panel inside, which has the "Bootstrap style: tabs" style provided by the said module; the mini-panel has 3 panes which are 3 views, one of them is using the masonry display.

I placed the code in my script.js files under my theme assets, which is invoked in the theme info file.

See this issue I opened there too (I am very frustrated): https://www.drupal.org/node/2594741

I tried with the Isotope module too (they have a masonry layout functionality as well), and the problem is the same.
A similar js code (http://jsfiddle.net/Vc6Vk/) didn't fix it either.

I'm currently in a situation where I lack time a lot ! I will have a look ASAP since the correction shouldn not be that hard I guess: just refreshing masonry on the 'shown.bs.tab' event would be enough.

Yes, because a browser window resize fixes it..

Hi !
Can you test this patch and let me know ? It is not actually that easy to make both work, specially when there are multiple Masonry display on a same page.
The patch attached does reinit *ALL* masonry display on page, not only the one in tab.

Did you get any opportunity to test my patch ?

I've tested this patch and it works, in my case in a panel.
Thanks @Dom.!

Patch #17 commited in dev branch. Will be included in next release.

Neither #6, the patch in #17, or the latest dev is working for me.

Just to confirm that I'm having the same issue: if the Quicktab that has Masonry isn't loaded first, the overlapping occurs until window resize. Selecting another tab, resizing the window again, and going back to the Masonry Quicktab causes the overlapping again.

My structure:
Bootstrap Theme (3.16) > Panel (3.9) > Quicktabs (3.8) > Mini Panel > Views Masonry

My Masonry Views settings:

• CSS Selector: .masonry-item {margin: 10px; padding: 20px; width: 329px;}
• Resizable and Animated
• Load images first

My Quicktab settings:

• Renderer: quicktabs
• Ajax: No

I have these Quicktab patches applied (in case one of them could be interfering):

• Allow HTML in tab title (2540450)
• Tab history (1454486)
• quicktab is broken when empty tabs are hidden (2396031)

If you can give me any clues what might be causing the problem, or another kind of workaround, I would be very appreciative. Thanks.

I have created quicktab with Renderer as a bootstrap tabs added 4 views block. The first block renders the masonry correctly, but another bootstrap tabs views masonry content styling not properly.

This code worked for me:
i have created one custom js file added in theme js folder then copy and paste below code in theme custom js file.

(function ($) {
    Drupal.behaviors.quicktabs_masonry = {
        attach: function (context) {
            jQuery('ul.nav-tabs li a').on('click', function () {
                setTimeout(function () {
                    jQuery('.masonry-processed').masonry({
                        itemSelector: '.masonry-item'
                    });
                }, 500);
            });
        }
    };
})(jQuery);