• Resolved olesolo

    (@olesolo)


    I’m using shortcodes to show tables in a Divi tabs. First tab loads table on phone in responsive mode but when I open other tabs all tables load as desktop versions.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter olesolo

    (@olesolo)

    I just found out that responsive feature is not working for data table with display:none;

    Plugin Author supsystic

    (@supsysticcom)

    Hello, @olesolo

    Can you give us a link to a page with data tables in tabs? It helps us to figure out your issue faster.Most likely bad code of your plugins or plugin, which you use to create tabs, provoked this issue.
    You need to deactivate all your plugins one by one and check the issue. Thus you will find out which plugin causes the error. If it won’t help, try to switch temporarily to a standard WordPress theme.

    Thread Starter olesolo

    (@olesolo)

    Here is the link. The tabs are at the bottom of the page. Try to open the second tab on mobile.

    Plugin Author supsystic

    (@supsysticcom)

    Hello, @olesolo
    In order to show data table in tab properly, you should call the function from Data Tables by Supsystic plugin to refresh table after the tab opening.
    Here is the example of custom code for using data tables in tabs:

    <ul id="tabsList">
     <li><a href="#tabItemContent_1" class="tabItem">Tab 1</a></li>
     <li><a href="#tabItemContent_2" class="tabItem" data-table_id="1">Tab 2</a></li>
     <li><a href="#tabItemContent_3" class="tabItem">Tab 3</a></li>
    </ul>
    <div id="tabItemContent_1">Some data</div>
    <div id="tabItemContent_2">[supsystic-tables id=1]</div>
    <div id="tabItemContent_3">Some data</div>
    jQuery(document).ready(function() {
     var tabSection = jQuery('#tabsList');
     var app = window.supsystic && window.supsystic.Tables ? window.supsystic.Tables : false;
     // Check are Data Tables by Supsystic plugin API and tabs section exist on page
     if(tabSection.length && app) {
      // Find all tabs
      tabSection.find('.tabItem').each(function() {
       // Get table id
       var tableId = jQuery(this).data('table_id');
       // Check, is this tab contains table or not
       if(tableId) {
        jQuery(this).on('click', function() {
         // Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening
         if(typeof app.getTableInstanceById(tableId).fnAdjustColumnSizing == 'function' ) {
          app.getTableInstanceById(tableId).fnAdjustColumnSizing(false);
         }
    
        });
       }
      });
     }
    });

    Please try it and let us know the results.

    Thread Starter olesolo

    (@olesolo)

    not working ??

    Thread Starter olesolo

    (@olesolo)

    I tried this code with a direct link to tableId

    jQuery(document).ready(function() {
    
     //jQuery('.et_pb_tab_1').attr('data-table_id', '1');
     var tabSection = jQuery('.et_pb_tabs_controls');
     var app = window.supsystic && window.supsystic.Tables ? window.supsystic.Tables : false;
     
     // Check are Data Tables by Supsystic plugin API and tabs section exist on page
     if(tabSection.length && app) {
      // Find all tabs
      tabSection.find('.et_pb_tab_1').each(function() {
       // Get table id
       var tableId = 1;
       // Check, is this tab contains table or not
        jQuery(this).on('click', function() {
         // Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening
         if(typeof app.getTableInstanceById(tableId).fnAdjustColumnSizing == 'function' ) {
          app.getTableInstanceById(tableId).fnAdjustColumnSizing(false);
         }
       });
      });
     }
    });
    Plugin Author supsystic

    (@supsysticcom)

    Hello, @olesolo

    Can you specify, what exactly is not working – table in tab is still not responsive or provided code doesn’t work for you?

    Thread Starter olesolo

    (@olesolo)

    table in tab is still not responsive.

    Plugin Author supsystic

    (@supsysticcom)

    Please, write us via internal support and we’ll provide a fix for you.

    Thread Starter olesolo

    (@olesolo)

    I still can’t fix this issue. I can’t add an id attributes to my tabs. May be you could add a simple code for “Execute JS Script After Table Load” to reload table?

    Plugin Author supsystic

    (@supsysticcom)

    Hello, @olesolo

    We have already improved required code to show Data Table properly in tabs and added fix to a plugin code.
    Here is the link to instruction: https://supsystic.com/documentation/table-in-hidden-tab/

    If you still have problems with it, please write us via internal support and we’ll try to make it work specially for you.

    Thread Starter olesolo

    (@olesolo)

    My quick solution is to change table class on click if window width is small.

    if (jQuery(window).width() < 480) {
                jQuery('div.et_pb_tab table').attr('class','supsystic-table border stripe hover order-column lightboxImg no-border  dataTable no-footer oneColumn oneColumnWithLabels');
              }
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Tables in a tabs’ is closed to new replies.