Header columns do not align to body columns when using Scroller and drawing while hidden

tom99

When using a Scroller and the table is being (re)drawn while hidden, then the columns of the header do not align with the columns of the body.

Example:
http://live.datatables.net/letixeja/1/edit

Table is hidden initially. Click the "show" button to draw the table and make it visible. Header columns do not align to body columns now. Click the "fix" button to fix this.

Use case:
We are using Bootstrap tabs to switch between different panels of our application. Each panel has a table.
When a panel is not visible, a redraw of the table causes this misalignment of the header. This can be seen when switching back to a currently hidden panel.
An automatic redraw of all tables (hidden or not) is being caused when the user resizes the browser window or moves the window to another monitor. This triggers the issue easily.

Workaround:
When this potentially has happened, call draw(false) on possibly affected tables, after they are visible again (after the user has clicked on a tab).

Thanks!

Liekar

I have the same issue and also have a workaround but it's obviously not preferred. My app has 9 tabs. The first 8 point to the same table, TableA, but each has a filter so each shows different views of the table. The 9th tab shows a different table, TableB. As the user clicks on the tabs the tables show/hide (actually, the div's show/hide).

The 8 tabs on TableA display fine. I set up TableB pretty much the same way. But TableB displays with the misalignment of the header and columns. Worse, when the user would click back on one of the TableA tabs it would also now have the misalignment.

Here's a sample sequence, -
tab1, TableA - display is good
tab2, TableA - display is good
...
tab9, TableB - display is misaligned
tab2, TableA - display is misaligned
tab1, TableA - display is good
tab2, TableA - display is back to good

My workaround? I had scrollX=true on both tables. I changed it to scrollX=false on TableB, leaving scrollX=true on TableA. All columns now align properly, all the time.

I call draw() and columns.adjust() on the TableA tabs every time they are clicked; this did not help on the TableB tab. Only setting scrollX=false helped.

Something I suspect is a factor though I've not checked it out - TableA is wide and the columns must be adjusted to fit the screen. TableB is skinny and only really needs a small part of the page width.

BTW, I'm using the latest DataTables files as well as Bootstrap 3.

tom99

I think it is not exactly the same issue. Mine only happens for currently hidden tables on resizing the browser window.

kthorngren

Try columns.adjust(). Here is your example updated with columns.adjust().
http://live.datatables.net/cuveluce/1/edit

Kevin

tom99

Thanks, but this is essentially a similar workaround as draw().
I would always have to call that function when the user clicks on a tab, because a window resize might have misaligned the columns of a hidden table.