table overflow with many columns

kkittell518

Link to test case: https://grin.devlab.cz/gringlobal/search then type in vlasta in search box
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: When the page loads with the table data, initially it overflows. It's not until you resize the browser that it becomes responsive. I initialize it
$(function () { var table = $('table.observations').DataTable({ (etc.)

How can I prevent this from happening? I have several tables with multiple (up to 20) columns that do this.
Thank you,
Kay

kthorngren

I tried your test case but it seems to execute very slow for me. I suspect the problem is you are initializing the Datatable when the table is hidden. When the table is shown then use columns.adjust() to recalculate the table width. Similar to this example. You might also need to use responsive.recalc().

Kevin

kkittell518

The test case has changed, but the table tag wasn't hidden. It just loaded slowly enough that the document was loaded before the table was. I added columns.adjust().draw() in the windows.onload event. There's a blip while it's loading, but as long as it looks ok in the end, I'm fine with it.