DataTables + jQuery Tabs crash the header

macuser

Hey,

I'm trying to add two jQuery tabs and a DataTable inside each tabs.
The first DataTable inside tab1 is rendered properly, but when the second tab is clicked, the header of the second data table is collapsed.
And similarly, when I'm on the second tab, resize the window and click the first tab, the header of the first DataTable is collapsed.

I think this is because, the jQuery tabs has display : none for the other tab when one is active. So when a DataTable is rendered, the column width is collapsed.

I used the method fnAdjustColumnSizing() to adjust column sizing but couldn't sort out the issue.

If anyone has faced a similar issue, plz share the solution for this problem.


Thanks :)

macuser

Hey,

Finally found a solution for this.
[code]
$('#tabs').bind('tabsshow', function(event, ui) {
oTable1.fnAdjustColumnSizing(true);
oTable2.fnAdjustColumnSizing(true);
});[/code]

Using this, I can resize column size on tab show :)

Thanks

alongtheivy

can you show your full code and where you put the lines in to fix it? I am having the same problem and can't get mine to work...thanks!

macuser

What I did was the bind the fnAdjustColumnSizing(true) method on tab show event of the tabs.
So when a tab is rendered, it re-adjusts the header to the full width of the tab container.

benjiw

Any chance you could elaborate on this further? I'm having the same problem, but adding this script to my page doesn't fix it.

Thanks.