FIxedHeader in Boostrap tabs appears broken

FIxedHeader in Boostrap tabs appears broken

carlopcarlop Posts: 37Questions: 9Answers: 1

Hi, please refer to the demo
https://www.nfctech.eu/datatables-multiple-in-tab/
Heach tab contains a specific table.
When clicking on the "INTERAZIONI" tab and scrolling the page the FIxedHeader works correctly.
If, after having scrolled the "INTERAZIONI" table, I click on the "CERCA" tab and I scoll the table, the FixedHeader appears broken.
I used the fixedHeader.adjust() method as suggested in
https://datatables.net/forums/discussion/44705/fixed-header-bootstrap-tabs
inserting the code

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

but it is not working.
Any suggestion to solve the problem?
Thanks

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Hi,

    Could you update to the latest versions of DataTables and FixedHeader please? The page is running a few versions behind and hopefully the new ones shoudl address this (I recall an issue with Bootstrap and FixedHeader).

    Allan

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    Hi Allan, I update to the latest version of all the components but unfortunately the problem is still present as you can see from the demo. If you scroll the table in the "CERCA" tab, you will get the correct header only after having scrolled a lot down. It seems that the there is a delay between the scrolling action and the display of the correct header.
    First of all, is the code i used correct?

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

    Thanks

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    That's the oddest thing! I have no idea why that is happening I'm afraid.

    Could you use the datatables.js file rather than datatables.min.js. That will make it easier for me to trace through.

    Allan

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    Thanks Allan, I used both

    datatables.js
    and
    datatables.css

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Thanks - I'll try to take a look at it over the weekend. It might fall into next week though.

    Allan

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Thank you. It would appear that FixedHeader does actually display correctly initially (a single scroll in), but then messes up on the next scroll because for some reason.

    I haven't been able to replicate that locally, but its happening all the time with your page.

    Could you loose the top nav bar that is showing and hiding automatically? I'm wondering if that is causing the issue.

    Thanks,
    Allan

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    Hi Allan, thanks for your time. I disabled the top nav bar that is showing and hiding automatically, but the situation did not change (you can check, the top nav is presently disabled). I'm wondering if I am using fixedHeader.adjust(); in the correct way. At present the code is

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

    Is this correct?

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    edited July 2018

    Yes that looks fine and I believe it is working correctly.

    FixedHeader has an internal cache to "know" what state it is currently in and what it is transitioning to. It gets it right initially, but then it doesn't store that for some reason. Then when the page is scrolled again it attempts to transition state which has already been done, so its width calculations go out of the window.

    As a temporary measure, could you include this file (i.e. <script src="https://datatables.net/dev/dataTables.fixedHeader.js"></script> on your page please? Just after the main DataTables include would be fine. That way I can experiment a little - I need to know what is rewriting the cache value and haven't been able to find that.

    Allan

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    Hi Allan, done.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Could you change:

    $($.fn.dataTable.tables(true)).DataTable().fixedHeader.adjust();

    to be:

    $($.fn.dataTable.tables()).DataTable().fixedHeader.adjust();
    

    please? I believe that, in combination with other changes I've made will resolve the issue. The problem is that the header for the second table is being overlaid!

    Allan

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    Hi Allan, I did the modification and now it works. Which other changes have you made and where and how should implement it? Thanks

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Excellent! This was the change I made. It automatically disables the hidden FixedHeader now, and removing the true from the call above allows it to update all tables on the page, not just the visible ones.

    For the moment I would suggest using the nightly version of FixedHeader. Then when I release the next version, use that released version.

    Allan

This discussion has been closed.