Horizontal scrolling and the Fixedheader briefly losing alignment

silkspin

I’ve been trying to get a way of using fixedheaders on a wide table for a couple of days. I finally managed to get it working the same on desktop and mobile (I don’t want this to be responsive), but there is one slight problem. If the screen is scrolled when anywhere except the absolute left of the table, once the fixedheader is attached, it starts at the left, so it appears out of line. However, what causes it to realign straight away, is to just scroll horizontally either left of right and it suddenly jumps back into position. When you scroll back up and the fixedheader detaches once again, the problem above is repeated.

I’ve tried loads of suggestions with no luck including table.columns.adjust() and table.fixedHeader.adjust();.

I use the table inside a div to contain it, and this nearly works as I wanted.

<div style="overflow: auto; max-width: 100%;">
    <table class="datatable table table-striped table-bordered" id="datatable" style="width: auto; margin: 0;">

I’ve read about scrollX and fixedheaders not being being 100% compatible, but I seem to be so close to this working after trying so many combinations.

I use Bootstrap 5 and have all the latest versions from the downloads page. I have fixedHeader: true, scrollX: true,.

Is there a way something can be triggered to fix this like just a quick horizontal scroll does? I’ve attached a couple of demo screenshots and I’m hoping there might be something I can try without the need for a test case. I hope I’ve given enough detail.

silkspin

I've just noticed this example exhibits the same behaviour as I've described.

https://datatables.net/extensions/fixedcolumns/examples/integration/fixedHeader

• Horizontally scroll to the right of the table to show the "email" column.
• Vertical scroll the page up to trigger the fixed header.
• The header alignment is out because it starts with "Last Name".
• Horizontally scroll inside the table and the header is fixed.

I've tried this in Chrome, Safari and Firefox and they all behave the same.

allan

I agree - that looks like a bug. Thanks for letting me know about it. I'll post back when I've got a fix.

Allan

palkitt

I also reported the same(?) issue some time ago:
https://datatables.net/forums/discussion/81345/bug-when-combining-fixedheader-4-0-3-and-fixedcolumns
I noticed it appeared in FH 4.0.3 and worked fine in 4.0.2

allan

I've just made this commit which I believe addresses the issue.

Could you try the FixedHeader nightly and let me know if it fixes the install for you please?

@palkitt - Sorry I missed your thread. The update also appears to fix the issue from your test case.

Allan

silkspin

It certainly has fixed it @allan!

I've tried different combinations of actions and can't break it! Thanks for fixing it and don't forget to fix your example page

allan

The example will update automatically when I do a release of FixedHeader and redeploy the website.

Thanks for the confirmation that it is working, I'll get the release made soon.

Allan