FixedHeader Extension Not Working in Bootstrap 5 Modal - Need Assistance
FixedHeader Extension Not Working in Bootstrap 5 Modal - Need Assistance
BrightGear
Posts: 3Questions: 1Answers: 0
Hello DataTables Community,
I am currently working on a project that uses DataTables. I have encountered an issue while trying to implement the FixedHeader extension of DataTables within a Bootstrap 5 modal.
The problem I am facing is that the FixedHeader does not seem to work as expected within the modal. I have tried several approaches to resolve this issue, but none have been successful so far.
Here is a link to a test case that replicates the issue
In this test case, you will see that I have a Bootstrap 5 modal containing a table that uses DataTables. I have applied the FixedHeader extension to the table, but the header does not remain fixed when scrolling.
I would appreciate any guidance or suggestions on how to resolve this issue. Is there a workaround or a specific way to implement the FixedHeader extension within a Bootstrap modal?
Thank you in advance for your time and assistance.
Best Regards,
Sasha
This question has an accepted answers - jump to answer
Answers
Thanks for the test case! I tried adding
fixedHeader.adjust()when theshown.bs.modalfires but it still doesn't work.https://live.datatables.net/qokatiqa/3/edit
@allan will need to take a look.
Kevin
Thank you for the prompt reply, Kevin!
Yeah, fixedHeader.adjust() was among the things I tried with no luck
Ah, the problem is that the DataTables is inside a scrolling container. FixedHeader currently only works when it is the document (i.e. the whole window) that is scrolling, or when DataTables scrolling is enabled.
Adding the ability to have it either automatically detect scrolling parent containers (worried about performance), or to be able to specify a selector for the scrolling parent, is something that is on my todo list (its been there for too long already...).
For this sort of use case, I'd be tempted to use
scrollY, which you can set to be a dynamic height - e.g.:https://live.datatables.net/qokatiqa/7/edit
Then there is no need for FixedHeaders.
Allan
Thank you Allan, for the assistance and explanation! Now that is clear why I couldn't make it working
Hopefully, you will be able to implement that feature with the ability to specify selector for the scrolling parent sometime in the future
There a lot on your plate, and I understand that item probably not top priority in your quite long todo list