Table width grows when filtering a scrolling table results in the scroll bar not being displayed

elevy

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]

CrashMeister

Thank you.

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.

elevy

Strange. I am using scrolling and sorting, and it works fine for me in Chrome under OSX. I'll test in FF and IE. The DataTables code does include a hack for IE6. Wonder if that may also play a part.

saintfalcon

I'm sorry for being a total beginner.
how to apply?

jasheets1

I had the same issue with scrolling and sorting enabled. Here is a fix I made to a few lines of dataTables.js version 1.8.2:

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

Are you able to create an example using the live site ( http://live.datatables.net ) which results in the problem you describe? If so then I'll look at getting this fixed in the DataTables core as I'll have a way of reproducing the problem.

Allan

blooders

I've been struggling with this issue as well. I also struggled to reproduce it on the live site.

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]

kailas

I experienced this same problem in Safari. This fix resolved the issue.

jancel

The above fix worked (the one that this thread is about). Can we get this changed in the library please? This is a very annoying bug and it makes me feel bad to even have to modify the library.... Maybe for the next version???

allan

This one rather slipped through the cracks - sorry about that. I've just committed a suitable fix, also addressing how this will work in IE6/7 (that was fun...).

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

jasheets1

The latest 1.9.0 release is working great now. Thanks for the fix

jasheets1

I spoke a moment too soon. The latest 1.9.0 still has an issue with this. Note that it only appears when you set your sScrollY for scrolling but the table is short enough to not include the scrollbars.

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

smasila

I am still facing this issue even after applying nightly js file from 4th April. I have the datatable inside another table