bootstrap 3 fixedheader scrolling down issue

[foodgame]

reproduce:

1. https://jsfiddle.net/gj79h4e1/
2. change the output window width to 630px.
3. change the output window height so it only shows half of the last row.
4. scroll down the page, you will find you cannot, it jumps to the top

My project cannot use nowrap or autowidth. Any way to fix this issue?

attached a gif to show the problem.

[AllanJard]

Thanks for posting this and the test case - there is certainly an issue there. We will look into this can get back to you.

[AllanJard]

We are having some difficulty in figuring out what is causing them I'm afraid. It probably isn't going to be a quick fix.

[foodgame]

I guess it is related to something like columns.adjust(). I have another case, when I scroll down the page and the fixed header is just going to show, it redraws the table and changes the columns width so all the content can be shown on the page without scrollbar, it jumps to top of the page and scrollbar is disappeared of course. So I guess when the fixed header is going to show, it tries to adjust the columns width to show all the content without scrollbar. I hope this can help you find the cause.

[holtkamp]

@AllanJard has the cause been found? Or are additional examples required?

[AllanJard]

We haven't figured it out yet I'm afraid. If you have another test case, that certainly won't hurt.

[foodgame]

@AllanJard In dataTables.fixedHeader.js, I add console.log($(document).scrollTop()) to line 332 and 342. I find after line 341 .append( itemElement ); the output is 0 which means it jumps to the top. I hope this can help you to fix it.

[danimarpe]

In case it could help you to find the cause of the problem: this happens even without Bootstrap3. I'm using plain datatables, without Bootstrap, and I have the same problem. I changed the version of FixedHeader to v3.1.9 and it worked fine.

[RobertMouncer]

I also found this issue, I have posted to the datatables forums but have also found that downgrading from Bootstrap 5 to 4 resolved the issue. You may need to upgrade from BS3 to 4. Here is my post on the forum with another test case:

When using the fixedHeader plugin, if all the rows total height is slightly more than the total height of the browser viewport, it becomes almost impossible to scroll down to the bottom and the scroll bar shoots back to the top when the fixedheader appears.
I have created an example, please open the output into a full tab window to see the effect.
I am using firefox at 1080p.

Link to example code: http://live.datatables.net/muvideli/1/edit
Link to example output: http://live.datatables.net/muvideli/1

[AllanJard]

Many thanks for that example - I see the error there as well and with our latest nightly too. I'll report back here when I have more info.

[holtkamp]

@AllanJard in case there is a way to help resolving this, for now I locked the use of Fixed Header plugin to 3.1.9 to prevent this error to occur.

[AllanJard]

Have you tried the nightly? It has some changes that should help resolve this.

[holtkamp]

I tried https://github.com/DataTables/FixedHeader/releases/tag/3.4.0 last week. That version was released on 04-07-2023 and seems to include all "recent" changes.

However, when I try it again now with 3.4.0, it seems not possible to reproduce the problem, so I am not sure what went wrong last week 😉 . I will monitor it!

[AllanJard]

Oh sorry - I had forgotten I'd done that release! This is the fix that I was specifically thinking of.

[holtkamp]

Update: in some cases this issue still occurs on Chrome 121.0.6167.184 with:

• bootstrap 3.4.1
• datatables.net 1.13.6
• datatables.net-bs 1.13.6
• datatables.net-fixedheader 3.4.0
• datatables.net-fixedheader-bs 3.4.0

It happens when scrolling down slowly and the fixed header is about to be activated, when scrolling fast is seems to quickly scroll beyond the fixed header and then the issue does not occur.

Another workaround is to make the browser window significantly smaller. For example:

• from 3000 pixels width => 2950 does not fix it
• from 3000 pixels width => 2930 does not fix it
• from 3000 pixels width => 2920 does fix it

[AllanJard]

I've done a bunch of work on FixedHeader recently and was seeing this exact issue. It is resolved now with the latest builds: https://live.datatables.net/sunuhiyu/1/edit .

It should be noted that FixedHeader 4 (which has this fix) will be released alongside DataTables 2 (upon which it depends), very soon.

[holtkamp]

@AllanJard thanks for the swift reply. Do you think the fix can be backported to the FixedHeader 3 branch? Upgrading to DataTables 2 is quite a big step 😨

[AllanJard]

Technically, yes I'm sure it can be. This is the commit in question, however there have been a lot of other changes to address other issues, and it is quite possible some of them might impact this - I don't know. It isn't currently on my agenda to back port the change I'm afraid, but I'd take a PR if yourself or someone else wants to make the change and it does resolve that issue.