Isotope - Has to Double-click/Click Twice
Budget: $10 – $30 USD
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 use get_post_type() to get the post type for the data-category attribute in the content-archive.php file.
Since I cannot give access to the website, I recreated the isotope issue in Codepen (link below).
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 from Metafizzy provided: https://isotope.metafizzy.co/filtering.html
Since I cannot give access to the website, I recreated the isotope issue in Codepen (link below).
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 from Metafizzy provided: https://isotope.metafizzy.co/filtering.html