Isotope Filtering working with Bootstrap Tabs (WordPress Custom Post Type Query Loop in each Tab)

[jessk4code]

I am trying to use isotope filtering (cool animations) with bootstrap tabs where each tab-pane has its own custom post-type query loop. For some reason, I have to click twice on the tabs to have the fitRows layout work.

I have tried and/or implemented the list below.

1. wrapped with on load function
2. set max width and height for images
3. imagesLoaded and layout (formerly isotope reLayout)
4. hidden/show style options from isotope (remove transforms I believe but took it off as nothing changed and was using it to fix the overlapping issue but it is no more when using tab-pane as the container)
5. using the same active class as bootstrap tabs

Here is an example on codepen - https://codepen.io/badcomputerfhs/pen/ZEaKZbX Filter example provided: https://isotope.metafizzy.co/filtering.html

[jessk4code]

I thought using a class selector that Isotope would be applied properly to all with the container class. I learned I had to initiate Isotope on each tab (with data attributes) if I wanted multiple instances. The issue had nothing to do with filtering settings. As you can see in the Codepen link, the problem was fixed and data attributes are used to initialize Isotope.

data-isotope='{"itemSelector": ".element-item" , "animationEngine": "best-available", "layout": "fitRows" }'

Here is a way how to create multiple instances in js - Stackoverflow.

`var $container = [$('#container'), $('#container-new')];

    //Initialize isotope on each container
    jQuery.each($container, function (j) {
        this.isotope({
            itemSelector : '.element'
        });
    });`

Then I recreated the layout after a tab has been shown using the bootstrap event shown.bs.tab:

$('.nav-tabs li a').on('shown.bs.tab', function (e) {
$container.isotope('layout');      
});

source

[thesublimeobject]

@jessk4code — Sorry for the late response, but based on the Pen it seems you were able to get this working! If you have any other follow up questions, let me know! :)