mirror of
https://github.com/DataTables/DataTables.git
synced 2025-02-27 00:54:15 +01:00
Fix: x-scrolling to the end of a table would cause the header and the columns to go out of alignment due to the header not being able to scroll as far as was needed (this was caused by the changes in 876a75f) - 8332.
Fix: Table could conitnually expand when x-scrolling was enabled. This was partly addressed in 6776, but the fix was incomplete as it would still occur on Safari Mac (possibly other browsers as well). This fix is very closely related to 8332 (hence commiting together as they are interdependent). Now use padding right on the header/footer wrapper to provide the overflow scroll ability, but only add it when a scrollbar is present - otherwise the width gets added on and we get the forever expanding table. Dev: Unit tests - New tests for scrolling to ensure 6776 and 8332 don't occur again
This commit is contained in:
Allan Jardine
parent
0151d43c25
commit
ab9dfd5052
13
media/js/jquery.dataTables.js
vendored
13
media/js/jquery.dataTables.js
vendored
@ -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 )
|
||||
|
||||
@ -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 )
|
||||
|
||||
116
media/unit_testing/templates/6776.php
Normal file
116
media/unit_testing/templates/6776.php
Normal file
@ -0,0 +1,116 @@
|
||||
<?php
|
||||
header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );
|
||||
header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
|
||||
header( 'Cache-Control: no-store, no-cache, must-revalidate' );
|
||||
header( 'Cache-Control: post-check=0, pre-check=0', false );
|
||||
header( 'Pragma: no-cache' );
|
||||
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />
|
||||
|
||||
<title>DataTables unit testing</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../css/demo_page.css";
|
||||
@import "../../css/demo_table.css";
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../unit_test.js"></script>
|
||||
<?php
|
||||
$aScripts = explode( ":", $_GET['scripts'] );
|
||||
for ( $i=0 ; $i<count($aScripts) ; $i++ )
|
||||
{
|
||||
echo '<script type="text/javascript" language="javascript" src="../'.$aScripts[$i].'?rand='.rand().'"></script>'."\n";
|
||||
}
|
||||
?>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div id="demo">
|
||||
<h1>Live example</h1>
|
||||
<table>
|
||||
<thead/>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div>
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th width="25%">Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center"> 4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
media/unit_testing/tests_onhold/1_dom/6776-scrolling-table-grows.js
Executable file
64
media/unit_testing/tests_onhold/1_dom/6776-scrolling-table-grows.js
Executable file
@ -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();
|
||||
} );
|
||||
63
media/unit_testing/tests_onhold/1_dom/sScrollXY.js
Executable file
63
media/unit_testing/tests_onhold/1_dom/sScrollXY.js
Executable file
@ -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();
|
||||
} );
|
||||
Loading…
x
Reference in New Issue
Block a user