Bad Reflow in nested dynamic tables in Firefox & IE
Bad Reflow in nested dynamic tables in Firefox & IE
jpgrace
Posts: 3Questions: 0Answers: 0
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.
[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.
This discussion has been closed.
Replies
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
Any suggestions?
[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