Hey,
Masonry loads on page load setting the layout of the items, because those items are hidden masonry sets an incorrect layout because the container is on display:none;
This would happen with any tab system that you place masonry items into because of how the javascript calculates the absolute position.
A workaround would be to set all the tabs to display block but then hide them through css visibility and setting the height to 0. So something like this css should work for you which you can add in your appearance > customizer > custom css:
.kt-tabs-wrap .wp-block-kadence-tab {
display: block;
visibility: hidden;
height: 0;
}
.kt-tabs-wrap.kt-active-tab-1>.kt-tabs-content-wrap>.kt-inner-tab-1,
.kt-tabs-wrap.kt-active-tab-2>.kt-tabs-content-wrap>.kt-inner-tab-2,
.kt-tabs-wrap.kt-active-tab-3>.kt-tabs-content-wrap>.kt-inner-tab-3,
.kt-tabs-wrap.kt-active-tab-4>.kt-tabs-content-wrap>.kt-inner-tab-4,
.kt-tabs-wrap.kt-active-tab-5>.kt-tabs-content-wrap>.kt-inner-tab-5,
.kt-tabs-wrap.kt-active-tab-8>.kt-tabs-content-wrap>.kt-inner-tab-6 {
visibility: visible;
height: auto;
}
Let me know.
Ben
Hi Ben,
That worked for me.
Also: I reached out to the author of the Masonry Block and they suggested another working solution. Thought you might be interested.
— START —
add_action( ‘wp_footer’, ‘uagb_kt_compatibility_for_tabs’, 9999 );
function uagb_kt_compatibility_for_tabs() {
?>
<script type=”text/javascript”>
( function( $ ) {
var kt_tabs = $( ‘.kt-tabs-wrap’ );
kt_tabs.find( ‘.kt-title-item-1’ ).click( function() {
kt_tabs.find( ‘.kt-inner-tab-1’ ).find( ‘.is-masonry’ ).isotope();
});
})(jQuery)
</script>
<?php
}
— END —
Is there a way to make any of this a permanent solution?
Thanks again,
Andreas
Hey, yep re starting masonry when a tab is clicked would also work.
If anything were to be permanent it would be in the masonry plugin. The CSS is a hack and not really the best way to manage tabs.
The javascript would need to be in the plugin that calls isotope not this plugin.
I would imagine it doesn’t really make sense for the plugin authors to add javascript for every tabs block so likely your best solution is to add your own javascript. But perhaps they want to support it.
Ben
Thanks Ben,
I’ll close this message as resolved, then…
Best regards,
Andreas
@britner May I suggest to build the solution into the kadence block plugin ?
– Either by not using “display:none;” (the css solution works fine and I don’t see why it shouldn’t be implemented).
– Or by triggering the “resize” javascript event on changing tab (this would enable most responsive javascript layouts to handle being inside the kadence block tabs perfectly fine
triggerresize = function() {
var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent .initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);
}
I tried this function, which works fine for my slider, and should work fine for masonry too.
The idear being to bind this function as a callback to :
– finishing to build initial kadence block layout
– changing tabulation.
In my case I had to go the css way because I can’t edit the kadence-block javascript
Thanks for your comment, I’ve been researching and testing different options, getting full browser support and considering what is the best route for page speed has been weighing pros and cons. But I’ve got plans to implement something for this soon. Triggering a resize is a good idea.
Ben
