ScrollX on IE 8, 9 and Firefox not working correctly when serverSideProcessing is set

siddhuwarrier

Hi,

I'm new to Datatables, and rather a Javascript noob. Therefore, apologies in advance if this isn't a bug but a result of my stupidity, and many thanks in advance for helping me sort this out.

*(I) Description of Problem*

DataTables version used: 1.9.3

I have a Datatables table that loads data from the server using Ajax requests and pipelining. I have a large number of columns, as a result of which I have scrollX set. This works fine on Google Chrome v21, but on Firefox v10.0 and v14.0, the horizontal scrollbar is not rendered for the table at all, and therefore, the vertical scrollbar ends up right at the end of the window, invisible to our users (please see screenshot uploaded to Amazon S3: http://bit.ly/TSTtTP).

My DataTables initialisation code is as follows:

[code]
display_table = $('#reportview-table').dataTable({
"bProcessing":true,
"bServerSide": true,
"sAjaxSource":"/reportviews/" + report_view_pk + "/rows/",
"fnServerData": fnDataTablesPipeline,
"sPaginationType": "bootstrap",
"oLanguage": {
"sInfoFiltered": ""
},
"bScrollCollapse":true,
"bSortClasses": false,
"sScrollY":getHeight() - 315 + "px", //getHeight() is cross-browser compatible; this is a bit nasty but works
"sScrollX":"100%",
"sDom":'<"toolbar">rtip',
"iDisplayLength":15,
"aoColumnDefs":[
{% for column in columns %}
(... DJANGO TEMPLATE STUFF ...)
{% endfor %}
],
"fnRowCallback": function () {...},
"fnInitComplete":function () {...}
});
[/code]

This problem arises given the following circumstances:

1. bServerSide is set to true ( and replaces it with another whereby the tbody is no longer aligned with thead or tfoot).
2. The table is accessed using Firefox or Internet Explorer.

*(II) Debugging Information*

I spent some time investigating this problem, and found out that the following was happening:

* On Chrome, the divs _dataTables_scrollHead_, _dataTables_scrollBody_, and _dataTables_scrollFoot_ have the width CSS property set to 100%. But on Firefox and IE, the width property is set to an absolute number (for instance, 3300 px).

* I added log statements to jquery.datatables.js to see what was going on, and I found that in the method _fnFeatureHtmlTable(...), the nScroller variable has width set to 100%. I got lost in the code beyond this point, so the width is being converted to an absolute number somewhere after this.

* I could fix this problem by either removing bServerSide and fnServerData, or by adding an !important width property set to 100% to the scroll elements in the CSS. While this moved the scrollbar to its rightful place, it resulted in the body no longer being aligned to the header and footer. I can provide you with a screenshot if necessary. (This was when I also found that I was unable to fix column widths using sWidth, but that's a different question I'll ask elsewhere).

* I switched to Datatables v1.82, and I continued to have the same problem.

Thanks for reading through this description, and I do hope this describes the problem sufficiently well. I'd be extremely grateful for any help.

Thanks!

allan

Can you link use to a test case showing the problem please? I we'll need a way to be able to reproduce the issue in order to be able to solve it. I've used scrolling with server-side processing a number of times before, so I'd be surprised if it were that, but there is obviously some unexpected interaction going on somewhere.

Thanks,
Allan

siddhuwarrier

Hi Allan,

Thanks so much for replying to my message.

Unfortunately, I can't provide you with a test case at the moment as the data I have, while test data, is still proprietary to my customer. I shall try and build a test case as soon as I can after I get permission from the customer, and share it with you.

Funnily enough, it works perfectly on IE 7! o_O It's just IE 9 and Firefox (not tried IE 8).

Cheers,

Siddhu

siddhuwarrier

Hi Allan,

I'm still working on trying to get assent to exposing anonymised data to you. In the meantime, I've spent a few hours stepping through the Javascript code to find out where things are going wrong with Firefox and IE 8+.

The problem manifests itself thus: when the "fake" headers and "fake" footers (line 3,337) are removed, the first column in the body shrinks. This results in o.nTable.outerWidth() getting set to less than the sanityWidth. When you then set the width of the scrollbody to the value of iCorrection, Firefox and IE 8+ decide to render the whole table on the screen as mentioned earlier.

If I comment out the sanity checking bit, the scroll bars stay where they should, but the columns are misaligned. I have reproduced the appropriate portion of the jQuery.datatables.js code here (lines 3353 onwards).

[code]
if ( $(o.nTable).outerWidth() < iSanityWidth )
{
/* The min width depends upon if we have a vertical scrollbar visible or not */
var iCorrection = ((nScrollBody.scrollHeight > nScrollBody.offsetHeight ||
$(nScrollBody).css('overflow-y') == "scroll")) ?
iSanityWidth+o.oScroll.iBarWidth : iSanityWidth;

/* IE6/7 are a law unto themselves... */
if ( ie67 && (nScrollBody.scrollHeight >
nScrollBody.offsetHeight || $(nScrollBody).css('overflow-y') == "scroll") )
{
o.nTable.style.width = _fnStringToCss( iCorrection-o.oScroll.iBarWidth );
}

/* Apply the calculated minimum width to the table wrappers */
nScrollBody.style.width = _fnStringToCss( iCorrection );
nScrollHeadInner.parentNode.style.width = _fnStringToCss( iCorrection );

if ( o.nTFoot !== null )
{
nScrollFootInner.parentNode.style.width = _fnStringToCss( iCorrection );
}

/* And give the user a warning that we've stopped the table getting too small */
if ( o.oScroll.sX === "" )
{
_fnLog( o, 1, "The table cannot fit into the current element which will cause column"+
" misalignment. The table has been drawn at its minimum possible width." );
}
else if ( o.oScroll.sXInner !== "" )
{
_fnLog( o, 1, "The table cannot fit into the current element which will cause column"+
" misalignment. Increase the sScrollXInner value or remove it to allow automatic"+
" calculation" );
}
}
[/code]

I really hope this will help you sort the problem out; I'm sorry I wasn't unable to identify the underlying cause of the problem.

allan

I've seen something like that recently actually - do you have max-width on the table element? If so - remove it. Firefox appears to obey that, while Webkit listens to the sizes that have been applied to the table. I'm not sure which behaviour is 'correct'!

Allan

siddhuwarrier

Hi Allan,

Thanks so much for getting back to me so quickly. I don't think I am setting max-width on the table element (I assume you mean the [code]...[/code] element inside [code]dataTables_scrollBody[/code]?

Here's the HTML that is produced in Chrome:

[code]




...
[/code]

In Firefox, the HTML that is produced for the same input is:

[code]



[/code]

When I change the dataTables_scrollBody width to 100%, the scrollbar fits back in, but the first column shrinks immediately.

Does this help clarify things?

siddhuwarrier

Hi Allan,

Thank you very much once again for offering to look at a sample application. I've just received permission to grant you access to our application. I have sent you a private message with the URL, access credentials, and usage instructions.

Thanks once again for this wonderful framework and all of your help! :)

Cheers,

Siddhu

allan

Hi siddhu,

Thanks for the PM with the login details. It is indeed a max-width:100% issue and it comes from bootstrap.css (line 1515).

So What I think you need to do is add the following to your CSS:

[code]
table.dataTable {
max-width: none;
}
[/code]

And that should do the job :-)

Allan

siddhuwarrier

Allan, thank you very much!! It works! I can now relax over the weekend. :)