Missaligned header , footer and body when scrollX is true

julija

I'm using Datatable with bootstrap. Table has style="width: 100%; white-space: nowrap;" , scrollX option is true.
Body is fine, 100% width, but header and footer are much smaller.
When I do inspect element dataTables_scrollHeadInner gets its calculated width and header and footer are then fine.
Also, sometimes refreshing a page also does the correct the width.
I have already tried adding

table.dataTable tbody th,
table.dataTable tbody td {
    white-space: nowrap;
}

as you mention in https://datatables.net/manual/tech-notes/6 but it's not working any differently.
I also tried every other possible solution I could find and none of them worked.
Please help me, this is happening only at one page, and I have been using Datatables for a while.
I tested on Chrome and Firefox, both act exactly the same (Inspect element and all).

kthorngren

Maybe try columns.adjust() after the table is initialized.

Kevin

julija

Kevin, thank you for your comment, but column.adjust() did not fix it.

julija

I found what is causing this bug, still don't know how to resolve it.
My DataTable is inside bootstrap tabs, which have .tab-pane class that has display:none if tab is not active.
However, even when tab becomes active and display:block is assigned to tab div, DataTables does not align header with body properly.
Of course, tabs will work only if all non-active tabs have display:none.

kthorngren

Did you try columns.adjust() after activating the tab?

If the Datatable is initialized but hidden then columns.adjust() is used to allow Datatables to adjust the column widths to the display.

Kevin

julija

Kevin, after realising the real issue, I managed to resolve it the same time you answered the question.
In case anyone else has the same issue, this is the event that catches tab change for bootstrap tabs. Tab2 is tab containing my DataTable in question.

$("a[href='#tab2']").on('shown.bs.tab', function (e) {
     krediti_radnika.columns.adjust().draw();
});

Thanks Kevin once again.