Problems with Tabs and Accordions | Tekanewa Scripts by Kraut Coding

When using the table element of this plugin within the tabs or accordion elements that are native to WP Bakery Page Builder itself (or other sources), you will notice that advanced table features (DataTable / FooTable / TableSaw) are either not working at all, or only in a limited capacity. Furthermore, any responsive behavior of the table will also be impacted negatively.

This is NOT a bug or issue with this plugin, but due to an inherit limitation in those container elements itself (tabs / accordion), caused by the way those other plugins or themes are implementing those tab or accordion elements.

The table scripts need to be able to correctly determine the table dimensions in order to apply its responsive behavior. But when embedded within a tabs or accordion element, only the table in the first tab / accordion (or the one visible after page load) will be able to do so, because the other tables are hidden from view, in a container element (tab / accordion) that is invisible due to a “display: none;” rule.

Because of that, a browser will assign a width and height of 0 (zero) pixel to any element that is hidden that way, preventing the table scripts to determine any valid dimensions for the tables in any of the none visible sections, which is why those tables are “missing” their responsive behavior. Other advanced table features (filter, sorting, serch, etc.) can be impacted as well, for the same reason.

Therefore, it is usually NOT supported to embed a table element within a tabs or accordion element, as those elements will prevent the table from working correctly. If the tabs or accordion element would trigger a global resize event, every time a new tab or accordion section is activated, the table would be able to adjust itself again, but otherwise, this plugin has no way of knowing when a new tab or accordion section has been selected.

In regards to the “TableSaw” script, there is a possible workaround, requiring some additional JS code to be added to the page holding the elements. This code will trigger a global browser resize event when clicking on a tab and then re-initializing any TableSaw tables within the tabs element.

<script type="text/javascript">
    jQuery(document).ready(function () {
        /* Hook into the tab click event */
        /* Adjust class name ".tabli" with the class name actually used by tabs element */
        jQuery("body").on("click", ".tabli", function(event) {            
            setTimeout( function() {
                /* Trigger a Global Resize Event */
                if (typeof(Event) === 'function') {
                    window.dispatchEvent(new Event('resize'));
                } else {
                    var evt     = window.document.createEvent('UIEvents'); 
                    evt.initUIEvent('resize', true, false, window, 0); 
                    window.dispatchEvent(evt);
                }
                jQuery(window).trigger("debouncedresize");
                /* Readjust TableSaw Layout */
                var tab         = jQuery(this).find("a").attr("href").substring(1);
                var table       = jQuery(this).parent().next().find("#" + tab).find(".ts-advanced-tables-datatable.ts-datatables-theme-tablesaw").trigger("enhance.tablesaw");
            }, 200);
        });
    });
</script>

jQuery(document).ready(function () {

/* Hook into the tab click event */

/* Adjust class name ".tabli" with the class name actually used by tabs element */

jQuery("body").on("click", ".tabli", function(event) {

setTimeout( function() {

/* Trigger a Global Resize Event */

if (typeof(Event) === 'function') {

window.dispatchEvent(new Event('resize'));

} else {

var evt = window.document.createEvent('UIEvents');

evt.initUIEvent('resize', true, false, window, 0);

window.dispatchEvent(evt);

}

jQuery(window).trigger("debouncedresize");

/* Readjust TableSaw Layout */

var tab = jQuery(this).find("a").attr("href").substring(1);

var table = jQuery(this).parent().next().find("#" + tab).find(".ts-advanced-tables-datatable.ts-datatables-theme-tablesaw").trigger("enhance.tablesaw");

}, 200);

});

</script>

Using this code or any modified version of it (in order to use it with other elements than just tabs) should only be done by advanced and experienced users. Please be aware that the code above is only provided as a guide for a potential workaround; however, “Tekanewa Scripts by Kraut Coding” does not officially support any such implementations and usage is at the users own risk.

Tekanewa has written 35 articles