Bug in datatable.js Chrome column header alignment breaking with vertical scroll bar.

survalent

Noticed that in Chrome when datatable container is resized to get vertical scroll bar to show up with 'scrollY' parameter set, we get this as the header element (my datatable has a fixed width)

<

div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 690px; padding-left: 15px;">

Same page in IE11 gets this:

<

div class="dataTables_scrollHeadInner" style="width: 686px; padding-right: 17px; box-sizing: content-box;">

Same page in Firefox, gets this:

<

div style="box-sizing: content-box; width: 686px; padding-right: 17px;" class="dataTables_scrollHeadInner">

The scrollbar is appearing on the right side, so the header padding should be on the right.

Chrome though puts it on the left - this breaks header alignment.

On line 4005 in jquery.DataTable.js

var padding = 'padding' + (browser.bScrollbarLeft ? 'Left' : 'Right' );

In Chrome browser.bScrollbarLeft incorrectly reports as true, when it should be false. IE and Firefox report correctly.

this variable is set in
function _fnBrowserDetect( settings ){
...
browser.bScrollbarLeft = test.offset().left !== 1;
}

Apparently default Chrome theme fails that kind of test because in it test.offset().left returns as 0.9943181276321411

Tl,DR :

To fix:
browser.bScrollbarLeft = Math.round(test.offset().left) !== 1;

allan

Can you link to a test case showing the issue, as per the forum rules please? That way I can fully debug it and add the fix.

Having said that, I think this issue has already been fixed in the nightly version.

Allan