The second gallery (Deutsch) is built in a container (div) that does not have width, so an error occurs in the slider (display: none;)
To fix this, you need to modify the Kadence Tab Block or look for a block that hides tabs not by changing the display property (none /
block).
Hi there @gallerycreator Thanks, you helped me understand the issue better. I happen to work with the creator of KadenceWP and he helped me understand it as well from their perspective. Here’s the message, and a workaround for anyone who also uses Kadence Blocks:
Tabs use display none because this is the best for a number of reasons but dynamic javascript driven stuff can’t load in a display none area. To counter this we create a resize event when you switch tabs because anything that is javascript driven will usually have a resize listener that causes the render to update if the screen resizes. This is why most anything will work in the tabs block. The gallery/slider plugin you are using doesn’t appear to have a javascript listener for resize events. You can see this if you load your page on desktop and drag the screen to mobile, the thumbnails will all be in a line instead of paginated.
While this should be updated in that plugin to have a resize listener, you can also use css to change the way tabs are hidden/shown. Here is the css:
.kt-tabs-wrap .wp-block-kadence-tab[role="tabpanel"] {display: block !important;visibility: hidden;height: 0;padding: 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; padding:20px; }
So I think it’s a reasonable feature request for you all to add a JS listener for resize events.
Thanks!
