Fixed header + Bootstrap tabs

cfigueiredo82

Hello to all,

I'm using datatables + fixedheader + boostrap tabs and I'm having a strange behavior with tables in different tabs.

My http://jsfiddle.net/qamn26zp/12/ shows/describes the problem.

If all my tables where in the same page there wouldn't be a problem, but being in different tabs and having different number of columns the problem occurs.

Running $($.fn.dataTable.tables(true)).DataTable().fixedHeader.adjust(); in the console when the header is wrong corrects it.

Any ideas?

Thanks,
Carlos

Rob Brun

Hi Carlos, Have you tried this one

 $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
          $($.fn.dataTable.tables(true)).DataTable().fixedHeader.adjust();
    });

adjusting headers on this event works for me in bootstrap 3. I don't use fixed headers though.

Shay

cfigueiredo82

I updated the fiddle (http://jsfiddle.net/qamn26zp/13/) with the code you suggested and it worked partially.

There is another issue regarding with a tab with no tables (Tab 0 in my fiddle). Despite there's no tables when i scroll down a fixed header appear floating on it.

Any ideias?

cfigueiredo82

Updated fidlle link http://jsfiddle.net/qamn26zp/13/

nsantos

Hi Carlos,
Check if this helps jsfiddle.net/qamn26zp/14/

AZIIZ

Hello, I'm using this solution :

$( "#tab_link_id" ).on( "click", function () {
   setTimeout(function () {
          myTable.draw();
   }, 200);
} );