Bad Reflow in nested dynamic tables in Firefox & IE

jpgrace

When dynamically inserting a datatable into another datatable, the overflow area acquires a horizontal displacement upon element insertion when that element's insertion causes overflow auto. This occurs as part of the _fnAddOptionsHtml() method at line 1763 in version 1.9.4 of DataTables.

[code]nHolding.parentNode.replaceChild( oSettings.nTableWrapper, nHolding );[/code]

To see this in action, go to this example and click on two of the "New!" buttons. Notice that the second opened dataTable causes a reflow of the DOM, while the first opened dataTable does not.
See: http://jsfiddle.net/Lr6d8/9/

The following example shows that if the overflow auto event has already been triggered, then opening multiple inner dataTables has no effect on the horizontal scrolling nature. The only thing that is different between the following example and the previous one is the height of the outer dataTable.
See: http://jsfiddle.net/Lr6d8/12/

I've tested this behavior in the latest versions of IE, Safari, Firefox, Chrome, and Opera. Only IE and Firefox exhibited this behavior.

I'm not intimately familiar with the inner workings of the DataTable library, but my guess is that some sort of reflowMethod might need to be fired. Perhaps it doesn't exist and needs to be created. I'd be happy to help fix this, but I'll need some direction.

allan

I see yes (thanks for the examples!) - the issue is that the table has been given a static width, so it is forcing the width of the table to be a set amount (this static width is a core part of how DataTables operates), so when y-scrolling is activated, there isn't enough x space for both the table and the new scrollbar, so x-scrolling is also activated.

I'd say the easiest 'fix' is to just not have y-scrolling on the parent table. Or alternatively se overflow-y:scroll; to always force the scrollbars to show.

Another option might be to use fnTable and fnAdjustColumnSizing on all visible tables:

[code]
$.each( $.fn.dataTable.fnTables(true), function () {
$(this).dataTable().fnAdjustColumnSizing();
} );
[/code]

I can't do that on your example though, as a call to fnAdjustColumnSizing will redraw the table, which removes your added nodes. You might want to look into using fnOpen / fnClose .

Allan

jpgrace

I was unaware of fnOpen or fnClose! I've implemented them in my project, but the fnAdjustColumnSizing() method did not work. Thus I'm stuck with setting overflow-y: scroll. The problem I now have is knowing where to set overflow-y since overflow: auto is being set at the element level.

Any suggestions?

jpgrace

Barring a more elegant solution, I've just added this to the method that opens the inner dataTable

[code]
$innerDatatable.closest('.dataTables_scrollBody').css({
'overflow-y': 'scroll',
'overflow-x': 'hidden'
});
[/code]

This of course is not the best solution, but it works for now.

allan

Good to hear you got a work around. I'll keep this one in mind and try to come up with a proper solution!

Allan