Table width grows when filtering a scrolling table results in the scroll bar not being displayed
Table width grows when filtering a scrolling table results in the scroll bar not being displayed
elevy
Posts: 2Questions: 0Answers: 0
A few people have reported this issue in the past, but it's yet to be fixed. I tracked down the problem. The issue is that DataTables attempts to account for the scrollbar when drawing the header of a table set to scrolling, but as the table is set with scrolling to auto, the scrollbar may or may not be shown, depending the content and filtering. If the scrollbar is not shown, then DataTables should not set different widths for the header and the content.
Here is the fix:
[code]
--- jquery.dataTables.js 2011-09-10 10:46:32.000000000 -0700
+++ jquery.dataTables-scrolfix.js 2011-09-27 11:50:07.000000000 -0700
@@ -4223,12 +4223,26 @@
/* Finally set the width's of the header and footer tables */
var iOuterWidth = $(o.nTable).outerWidth();
nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth );
- nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth+o.oScroll.iBarWidth );
+ if ( nScrollBody.scrollHeight > nScrollBody.offsetHeight )
+ {
+ nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth+o.oScroll.iBarWidth );
+ }
+ else
+ {
+ nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth );
+ }
if ( o.nTFoot !== null )
{
- nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth+o.oScroll.iBarWidth );
- nScrollFootTable.style.width = _fnStringToCss( o.nTable.offsetWidth );
+ nScrollFootTable.style.width = _fnStringToCss( o.nTable.offsetWidth );
+ if ( nScrollBody.scrollHeight > nScrollBody.offsetHeight )
+ {
+ nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth+o.oScroll.iBarWidth );
+ }
+ else
+ {
+ nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth );
+ }
}
/* If sorting or filtering has occured, jump the scrolling back to the top */
[/code]
Here is the fix:
[code]
--- jquery.dataTables.js 2011-09-10 10:46:32.000000000 -0700
+++ jquery.dataTables-scrolfix.js 2011-09-27 11:50:07.000000000 -0700
@@ -4223,12 +4223,26 @@
/* Finally set the width's of the header and footer tables */
var iOuterWidth = $(o.nTable).outerWidth();
nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth );
- nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth+o.oScroll.iBarWidth );
+ if ( nScrollBody.scrollHeight > nScrollBody.offsetHeight )
+ {
+ nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth+o.oScroll.iBarWidth );
+ }
+ else
+ {
+ nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth );
+ }
if ( o.nTFoot !== null )
{
- nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth+o.oScroll.iBarWidth );
- nScrollFootTable.style.width = _fnStringToCss( o.nTable.offsetWidth );
+ nScrollFootTable.style.width = _fnStringToCss( o.nTable.offsetWidth );
+ if ( nScrollBody.scrollHeight > nScrollBody.offsetHeight )
+ {
+ nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth+o.oScroll.iBarWidth );
+ }
+ else
+ {
+ nScrollFootInner.style.width = _fnStringToCss( o.nTable.offsetWidth );
+ }
}
/* If sorting or filtering has occured, jump the scrolling back to the top */
[/code]
This discussion has been closed.
Replies
I applied your fix and it worked in IE and FF.
There is still an issue with a discrepancy between the headers and table body if sorting and scrolling is enabled. The headers are not as wide as the body, and repeatedly pressing a header to sort the column causes the table to grow in size and each time the header widths get closer to matching the body. After about six attempts they match up and then the table width remains constant. Quite bizarre to watch.
Regards,
Craig.
how to apply?
Comment out lines 4046-4048 and 4050 so that line 4049 always executes:
[code]
4046 //if ( ie67 && (nScrollBody.scrollHeight >
4047 //nScrollBody.offsetHeight || $(nScrollBody).css('overflow-y') == "scroll") )
4048 //{
4049 o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth()-o.oScroll.iBarWidth );
4050 //}
[/code]
Also modify line 4226 by removing the +o.oScroll.iBarWidth like this:
[code]
4226 nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth );
[/code]
The result is the table width does not grow when headers are clicked. But there is now a small gap between the table and the scrollbar, which isn't too bad.
Allan
I've now stumbled across a way to reliably reproduce the problem on any site / browser. Simply nest the datatable inside another table.
I used the following to reproduce it on the live site:
Javascript
[code]
$(document).ready(function() {
$('#example').dataTable(
{
"bFilter": true,
"bSort": true,
"sScrollY": "100px",
"bPaginate": false
}
);
} );
[/code]
HTML
[code]
...
Live example
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Trident
Internet Explorer 4.0
Win 95+
4
X
...
[/code]
Sorting a column results in a small adjustment in the column / table width. Filtering causes a much greater change.
I don't know the other guys usage and I'm not even sure I had this arrangement last time I saw the problem, I just hope this helps shed some light on it.
[/code]
I'd be really grateful if you could download the 1.9.dev.4 nightly and give the fix a go on your site: http://datatables.net/download/
Thanks,
Allan
I reapplied this fix to lines 3127-3131 and it fixes the issue for me (but leaves a small gap near the scrollbar):
http://datatables.net/forums/discussion/comment/27901#Comment_27901