Bootstrap 5 Modal to fit the viewport with scrollable DataTables body

Bootstrap 5 Modal to fit the viewport with scrollable DataTables body

valdastrvaldastr 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

  • allanallan Posts: 54,574Questions: 1Answers: 8,534 Site admin

    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

  • valdastrvaldastr Posts: 3Questions: 1Answers: 0

    Hi Allan,

    Thanks for the response and for the link for the blog post, I will revise it again.

  • valdastrvaldastr Posts: 3Questions: 1Answers: 0

    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

  • allanallan Posts: 54,574Questions: 1Answers: 8,534 Site admin

    That's really effective - nice one!

    Allan

Sign In or Register to comment.