FixedHeader multiple tables header positioning issue

_gurk_

Link to test case: http://live.datatables.net/vebosojo/1/
Debugger code (debug.datatables.net): https://debug.datatables.net/irosub
Description of problem: As you scroll down the page the fixed headers go out of sync, and the wrong table header is displayed above table in focus. Issue appears most times, but sometimes after adjusting page width the issue goes away. Experienced in Chrome, not tried other browsers yet. Am I doing something wrong, or is this a bug?

Many thanks,
Graeme

allan

Hi Graeme,

That's a really interesting one. If you were to initialise the tables in the same order as they are in the HTML, it would work. But since you aren't, what is happening when the DataTable initialisation is run it is adding styles to the tables, which changes the position of the lower tables on the page (e.g. adding padding to the header cells, etc).

That in turn means that the position they worked out that they were on the page is no longer correct (it doesn't listen for DOM mutations).

What you could do is call fixedHeader.adjust() on all the tables once they have been initialised:

   DataTable
    .tables( { visible: true, api: true } )
    .fixedHeader.adjust();

http://live.datatables.net/vebosojo/3/edit

Thanks for the test case!

Allan

_gurk_

Hi Allan,

That explains why the issue seemed new, as I only recently adjusted html ordering, but never suspected that to be the cause.

Handy to know I can force a "re-initialisation" via the adjust method, good tip.

Thanks for the support!

Graeme