Issue w/ Bootstrap5 + fixedHeader + scrollY

cesaros

Link to test case: https://codepen.io/cesaros/pen/QWzvdpJ
Debugger code (debug.datatables.net): https://debug.datatables.net/idesov
Error messages shown:
Description of problem: I have a table that I want to be scrollable. I haven't had any problems scrolling horizontally, only vertically. I'm also using a fixedHeader offset to work with my page's navbar. Once I introduce scrollY to contain the table into a smaller window the header of the table is shown near the bottom of the page after I scroll past the table.

I have not been able to reproduce this problem using only datatables. Once I introduce the bootstrap styling I run into this issue so I think the conflict is there but can't say for certain. Hopefully I'm missing something simple that I've overlooked.
Any ideas?

colin

It seems to be working OK on the example you posted above. Are you able to link to a page, please, that demonstrates the issue?

Colin

cesaros

Thanks for the reply, Colin. It works mostly as expected. My bad, I forgot to mention it depends on the length of the page. I was working in a smaller/narrow view port so I was able to scroll past the table. I've added more dummy text to make the page long enough to, hopefully, show the problem. Once the table is no longer visible on the page that's when I see the problem. see screenshot below

I can omit the scrollY option and it works fine, but in production I'm working with a larger table that has 200+ rows. I don't want to have to force users to scroll past the entire table to see the content that follows, especially in mobile/smaller screens.

Let me know if I can clarify anything. I appreciate the help

allan

Thanks for the test case!

I tracked it down to an issue with the calculation when the table is scrolling and does not have a tfoot element.

I've committed a fix for it and the nightly will have it included shortly.

Regards,
Allan

cesaros

Thanks Allan!