diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js index 5fb0bee5..ce683e06 100644 --- a/media/js/jquery.dataTables.js +++ b/media/js/jquery.dataTables.js @@ -3128,7 +3128,7 @@ if ( ie67 && ($('tbody', nScrollBody).height() > nScrollBody.offsetHeight || $(nScrollBody).css('overflow-y') == "scroll") ) { - o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth()-o.oScroll.iBarWidth ); + o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth() - o.oScroll.iBarWidth); } } else @@ -3305,12 +3305,19 @@ var iOuterWidth = $(o.nTable).outerWidth(); nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth ); nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth ); + + var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll"; + nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; if ( o.nTFoot !== null ) { - nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth ); - nScrollFootTable.style.width = _fnStringToCss( o.nTable.offsetWidth ); + nScrollFootTable.style.width = _fnStringToCss( iOuterWidth ); + nScrollFootInner.style.width = _fnStringToCss( iOuterWidth ); + nScrollFootInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; } + + /* Adjust the position of the header incase we loose the y-scrollbar */ + $(nScrollBody).scroll(); /* If sorting or filtering has occurred, jump the scrolling back to the top */ if ( o.bSorted || o.bFiltered ) diff --git a/media/src/core/core.scrolling.js b/media/src/core/core.scrolling.js index 4b13bfde..dc5b1115 100644 --- a/media/src/core/core.scrolling.js +++ b/media/src/core/core.scrolling.js @@ -259,7 +259,7 @@ function _fnScrollDraw ( o ) if ( ie67 && ($('tbody', nScrollBody).height() > nScrollBody.offsetHeight || $(nScrollBody).css('overflow-y') == "scroll") ) { - o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth()-o.oScroll.iBarWidth ); + o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth() - o.oScroll.iBarWidth); } } else @@ -436,12 +436,21 @@ function _fnScrollDraw ( o ) var iOuterWidth = $(o.nTable).outerWidth(); nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth ); nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth ); + + // Figure out if there are scrollbar present - if so then we need a the header and footer to + // provide a bit more space to allow "overflow" scrolling (i.e. past the scrollbar) + var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll"; + nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; if ( o.nTFoot !== null ) { - nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth ); - nScrollFootTable.style.width = _fnStringToCss( o.nTable.offsetWidth ); + nScrollFootTable.style.width = _fnStringToCss( iOuterWidth ); + nScrollFootInner.style.width = _fnStringToCss( iOuterWidth ); + nScrollFootInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px"; } + + /* Adjust the position of the header incase we loose the y-scrollbar */ + $(nScrollBody).scroll(); /* If sorting or filtering has occurred, jump the scrolling back to the top */ if ( o.bSorted || o.bFiltered ) diff --git a/media/unit_testing/templates/6776.php b/media/unit_testing/templates/6776.php new file mode 100644 index 00000000..62defd14 --- /dev/null +++ b/media/unit_testing/templates/6776.php @@ -0,0 +1,116 @@ + + + + + + + DataTables unit testing + + + + + '."\n"; + } + ?> + + +
+
+

Live example

+ + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rendering engineBrowserPlatform(s)Engine versionCSS grade
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 4.0Win 95+ 4X
+
+
+
+
+ + \ No newline at end of file diff --git a/media/unit_testing/tests_onhold/1_dom/6776-scrolling-table-grows.js b/media/unit_testing/tests_onhold/1_dom/6776-scrolling-table-grows.js new file mode 100755 index 00000000..cfc70d5f --- /dev/null +++ b/media/unit_testing/tests_onhold/1_dom/6776-scrolling-table-grows.js @@ -0,0 +1,64 @@ +// DATA_TEMPLATE: 6776 +oTest.fnStart( "Actions on a scrolling table keep width" ); + + +$(document).ready( function () { + var oTable = $('#example').dataTable( { + "bFilter": true, + "bSort": true, + "sScrollY": "100px", + "bPaginate": false + } ); + + var iWidth = $('div.dataTables_wrapper').width(); + + oTest.fnTest( + "First sort has no effect on width", + function () { $('th:eq(1)').click(); }, + function () { return $('div.dataTables_wrapper').width() == iWidth; } + ); + + oTest.fnTest( + "Second sort has no effect on width", + function () { $('th:eq(1)').click(); }, + function () { return $('div.dataTables_wrapper').width() == iWidth; } + ); + + oTest.fnTest( + "Third sort has no effect on width", + function () { $('th:eq(2)').click(); }, + function () { return $('div.dataTables_wrapper').width() == iWidth; } + ); + + oTest.fnTest( + "Filter has no effect on width", + function () { oTable.fnFilter('i'); }, + function () { return $('div.dataTables_wrapper').width() == iWidth; } + ); + + oTest.fnTest( + "Filter 2 has no effect on width", + function () { oTable.fnFilter('in'); }, + function () { return $('div.dataTables_wrapper').width() == iWidth; } + ); + + oTest.fnTest( + "No result filter has header and body at same width", + function () { oTable.fnFilter('xxx'); }, + function () { return $('#example').width() == $('div.dataTables_scrollHeadInner').width(); } + ); + + oTest.fnTest( + "Filter with no results has no effect on width", + function () { oTable.fnFilter('xxx'); }, + function () { return $('div.dataTables_wrapper').width() == iWidth; } + ); + + oTest.fnTest( + "Filter with no results has table equal to wrapper width", + function () { oTable.fnFilter('xxx'); }, + function () { return $('div.dataTables_wrapper').width() == $('#example').width(); } + ); + + oTest.fnComplete(); +} ); \ No newline at end of file diff --git a/media/unit_testing/tests_onhold/1_dom/sScrollXY.js b/media/unit_testing/tests_onhold/1_dom/sScrollXY.js new file mode 100755 index 00000000..d9a61195 --- /dev/null +++ b/media/unit_testing/tests_onhold/1_dom/sScrollXY.js @@ -0,0 +1,63 @@ +// DATA_TEMPLATE: dom_data +oTest.fnStart( "sScrollX / Y" ); + + +$(document).ready( function () { + // Force some x scrolling + $('body').css('white-space', 'nowrap'); + $('#container').css('width', '400px'); + + var oTable = $('#example').dataTable( { + "sScrollX": "100%", + "sScrollY": "200px", + "bPaginate": false + } ); + + oTest.fnWaitTest( + "Header follows x-scrolling", + function () { $('div.dataTables_scrollBody').scrollLeft(20); }, + function () { return $('div.dataTables_scrollHead').scrollLeft() == 20; } + ); + + oTest.fnWaitTest( + "Footer follows x-scrolling", + null, + function () { return $('div.dataTables_scrollFoot').scrollLeft() == 20; } + ); + + oTest.fnWaitTest( + "y-scrolling has no effect on header", + function () { $('div.dataTables_scrollBody').scrollTop(20); }, + function () { return $('div.dataTables_scrollHead').scrollLeft() == 20; } + ); + + oTest.fnWaitTest( + "Filtering results in sets y-scroll back to 0", + function () { oTable.fnFilter('1') }, + function () { return $('div.dataTables_scrollBody').scrollTop() == 0; } + ); + + oTest.fnWaitTest( + "Filtering has no effect on x-scroll", + null, + function () { return $('div.dataTables_scrollBody').scrollLeft() == 20; } + ); + + oTest.fnWaitTest( + "Full x-scroll has header track all the way with it", + function () { + $('div.dataTables_scrollBody').scrollLeft( + $('#example').width() - $('div.dataTables_scrollBody')[0].clientWidth + ); + }, + function () { return $('div.dataTables_scrollBody').scrollLeft() == $('div.dataTables_scrollHead').scrollLeft(); } + ); + + oTest.fnTest( + "Footer also tracked all the way", + null, + function () { return $('div.dataTables_scrollBody').scrollLeft() == $('div.dataTables_scrollFoot').scrollLeft(); } + ); + + oTest.fnComplete(); +} ); \ No newline at end of file