search

DataTables / FixedHeader

Fix the header, footer, left or right columns of a table in place, to always show them when scrolling
http://www.datatables.net/
Other
75 stars 83 forks source link

bootstrap 3 fixedheader scrolling down issue #105

Open foodgame opened 2 years ago

foodgame commented 2 years ago

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. chrome-capture

AllanJard commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

AllanJard commented 2 years ago

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

foodgame commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

@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 commented 1 year ago

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

holtkamp commented 1 year ago

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 commented 1 year ago

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

holtkamp commented 7 months ago

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

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:

AllanJard commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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.