FIxedHeader in Boostrap tabs appears broken

carlop

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

allan

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

carlop

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

allan

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

carlop

Thanks Allan, I used both

datatables.js
and
datatables.css

allan

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

Allan

allan

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

carlop

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?

allan

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

carlop

Hi Allan, done.

allan

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

carlop

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

allan

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