Bootstrap 5 with Responsive DataTables is not working
Bootstrap 5 with Responsive DataTables is not working
jeranU
Posts: 4Questions: 0Answers: 0
Link to test case: https://jsfiddle.net/yv0ug13j/5/
Debugger code (debug.datatables.net): evugat
Error messages shown: none
Description of problem: I have detailed the issues in the test case, but the core of the issue seems to be that bootstrap 5 is not correctly merging with the datatables responsive configuration. Key Issues:
- The key parts seem to be the .table-responsive class and the autowidth: false option.
- Any redraw is showing the expand indicator incorrectly.
when toggling the table responsive class and the auto width property, it appears to either not redraw the table as you resize, or it adds a bunch of empty extra space at the end of the container, decreasing the size of the table.
Any help with this would be greatlly appreciated
Replies
Other Discussions I referenced in this issue:
https://datatables.net/forums/discussion/78334/datatables-2-0-responsive-and-bs5-not-working
https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/#example2
https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width/46160726
table-responsiveis a Bootstrap class that should do on adivcontainer not thetable(see the Bootstrap docs.That is a different solution for wide tables from my Responsive extension for DataTables. The two are mutually exclusive and cannot be used together. (
table-responsivemakes the containing element scrolling, whereas Responsive will avoid scrolling by removing columns).Use one approach or the other, not both.
Allan
I updated my example as you suggested with the table-responsive in a div, here is the updated jsfiddle: https://jsfiddle.net/an985x3j/
As you can see, on either side of those examples, I am still having the problems (Also, the 3rd and 4th example are not using the table-responsive class at all and have the same problems)
Ah - I hadn't clicked that you were destroying the table on the "Draw" button press. There is indeed a bug in 2.1.6 (and earlier) that causes the effect you are seeing. I committed a fix for that last week, and it will be in the 2.1.7 release that I plan to make tomorrow.
With the nightly version your examples work okay.
Allan
Just implemented the new release and the issues have been resolved, thank you very much!
Excellent - thanks for letting me know.
Allan