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

This question has an accepted answers - jump to answer

Answers

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

    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

  • cfigueiredo82cfigueiredo82 Posts: 3Questions: 1Answers: 0

    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?

  • cfigueiredo82cfigueiredo82 Posts: 3Questions: 1Answers: 0

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

  • nsantosnsantos Posts: 2Questions: 1Answers: 0

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

  • AZIIZAZIIZ Posts: 2Questions: 0Answers: 0

    Hello, I'm using this solution :

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