Bootstrap 5 Modal to fit the viewport with scrollable DataTables body
Bootstrap 5 Modal to fit the viewport with scrollable DataTables body
valdastr
Posts: 3Questions: 1Answers: 0
Link to test case: https://codepen.io/valdastr/pen/qBmxVWa
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi, I have a Bootstrap 5 modal and within 'modal-body' I am showing a data table. When the shown data maxes out the height of 'modal-body', I'd like for a scrollbar to appear. Please see codepen - hit the button to show the modal and select to show 100 entries. Modal stretches out to fit the content where I'd like for the table to show scrollbar instead so whole modal is in the viewport. Basically the same as applying 'modal-dialog-scrollable', but only body of the table would scroll.
Now I am aware of the of the 'scrollY' option, but it is kinda limited to be static. One could set 'scrollY: 50vh', but on bigger screen it would not fill whole viewport and on small enough screen it still won't fit probably due 'dataTables_wrapper' having rows with columns that would stack on each other and viewport usage would be incorrect.
Is there any way to achieve the desired result so only body of the table would scroll? I found an example in the forums https://codepen.io/holdencreative/pen/ZYqoMg but it does not work with latest bootstrap/datatables.
Thanks!
Answers
I'm afraid what you are looking for isn't possible without a bit of work. You could do something like what I show in this blog post, but that doesn't specifically consider Bootstrap modals, so you might need to tweak it a little.
Allan
Hi Allan,
Thanks for the response and for the link for the blog post, I will revise it again.
Well, I managed to scramble a solution, but it involved a not so graceful modification of 'dom' option. Maybe someone will be interested. Feel free to point out any flaws.
https://codepen.io/valdastr/pen/dyWmqjQ
That's really effective - nice one!
Allan