Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2018

  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 Posts: 37Questions: 9Answers: 1

  July 2018

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2018

  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 Posts: 37Questions: 9Answers: 1

  July 2018

  Thanks Allan, I used both

  datatables.js
  and
  datatables.css
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2018

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

  Allan
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2018

  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 Posts: 37Questions: 9Answers: 1

  July 2018

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2018 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
• carlop Posts: 37Questions: 9Answers: 1

  July 2018

  Hi Allan, done.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2018

  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 Posts: 37Questions: 9Answers: 1

  August 2018

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2018

  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