Horizontal Scrolling Header Width in Tabs

  • Resolved oliversoftsell

    (@oliversoftsell)


    5 months ago

    Hi,

    My column headers are all wrongly formatted and don’t align with the cells below. II believe this is because I am using TablePress shortcode within a tab, causing the horizontal scrolling to not work properly. Apparently this is the cause according to TablePress support:

    “The reason for this problem is that, with tabs, only the first table is shown when the page is loaded. The tables on the other tabs are hidden. This however means that the browser can not calculate things like column widths for these tables.”

    Is it possible to solve this issue without buying the Premium version of TablePress? It seems very expensive to have to pay ￡80 per year just to have my columns aligned.

    Apparently the below code could be used to delay the Javascript, but it is not tailored for my website and I have no coding experience. Could you edit the below code so that it would work for my theme? I am using MyListing Theme and Elementor page builder:

    jQuery(function($){
    setTimeout( function() {
    $(‘.elementor-tab-content .dataTable’).DataTable({retrieve:true}).columns.adjust().draw();
    $(‘.elementor-tab-title’).one(‘click’, function(){$(‘#’+this.getAttribute(‘aria-controls’)+’ .dataTable’).DataTable({retrieve:true}).columns.adjust().draw();});
    }, 10 );
    });

    Many thanks,

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi!

    Thanks for your post and sorry for the trouble!

    What you found is indeed the reason why the columns widths are off in your table. As the table is initially hidden, those width calculations fail.

    You are also on the right track with that code example, but indeed, it will require some changes as your theme uses different CSS classes for the elements. As this is something that I would have to look up and test as well, I can only offer this as part of the direct email support that is included with a TablePress premium license plan. Thanks for your understanding.

    Note that you are not just getting “aligned columns” with a premium upgrade! TablePress Pro and Max have several features that could greatly enhance this table, like the Fixed Header feature or the Collapse mode for Responsiveness. Row Grouping for the “Type” column could also come in handy.

    Best wishes,
    Tobias

    Thread Starter oliversoftsell

    (@oliversoftsell)

    Hi Tobias,

    Thank you for your response.

    The column issue is the only feature I would need from the premium plan.

    I have worked with my theme’s support to get some code which seems to be working (usually) on incognito mode, but not on normal browser. I have cleared my cache so not sure why it’s not working.

    Here’s the code I have added:

    jQuery(function($){

     setTimeout( function() {

      $('.profile-menu li a').one('click', function(){

       $('#listing_tab_'+this.getAttribute('data-section-id')+' .dataTable').DataTable({retrieve:true}).columns.adjust().draw();

      });

     }, 10 );

    });

    Would you be able to advise why it may not work? Are there any edits you could make for me?

    Many thanks!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    You are on the right track here, but the selector to target the table is not specific enough.

    You will only want to target .dataTable inside of .dataTables_scroll containers here.

    Best wishes,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.