Fixed header + Bootstrap tabs

Fixed header + Bootstrap tabs

cfigueiredo82cfigueiredo82 Posts: 3Questions: 1Answers: 0

Hello to all,

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

My 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?


This question has an accepted answers - jump to answer


  • Rob BrunRob Brun Posts: 56Questions: 2Answers: 14
    edited September 2017 Answer ✓

    Hi Carlos, Have you tried this one

     $('a[data-toggle="tab"]').on("", function (e) {

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


  • cfigueiredo82cfigueiredo82 Posts: 3Questions: 1Answers: 0

    I updated the fiddle ( 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?

  • cfigueiredo82cfigueiredo82 Posts: 3Questions: 1Answers: 0

    Updated fidlle link

  • nsantosnsantos Posts: 2Questions: 1Answers: 0

    Hi Carlos,
    Check if this helps

  • AZIIZAZIIZ Posts: 2Questions: 0Answers: 0

    Hello, I'm using this solution :

    $( "#tab_link_id" ).on( "click", function () {
       setTimeout(function () {
       }, 200);
    } );
This discussion has been closed.