datatables with jquery tabs - column header size changed

amirdor

As you can see in the screenshot the columns header size is change after i click on the tab
the code for the tabs is

  $( function() {
    $( "#tabs" ).tabs();
  } );

is there a way to change it?
to keep the size fully width as the size of the table?

colin

Hi @amirdor ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

When displaying a previously hidden Datatable you need to use columns.adjust() for Datatables to recalc the column widths. When initialized in a hidden tab Datatables can't properly calculate the table and column widths. Also you need style="width:100%" configured on the table tag.

Kevin