Fixed column rows mis aligns when using custom webkit scrollbars

macuser

Hi Allan,

I'm using fixed column with datatable and it was working fine till I added a custom scroll bar.
When a custom scroll bar (css changes) is added, the padding which is added to the bottom
of the table is missing which causes the misalignment of the rows.
This also happens to the right part of the datatable where the scroll bar is present.

Check the issue in the below link.
http://live.datatables.net/oriqis/2/
Scroll to the last row where fixed column table stops scrolling and does not add a padding.

This happens on all webkit browsers.
Please let me know if there are any quick fixes for this or if this is fixed for the future releases.

And once again kudos on datatable. :)

Regards.

macuser

The reason for adding a custom scroll bar is that, the default scroll bars were not visible when Fixed column, tabletools were added and viewed on a Macbook without any external mouse connected.

However scroll bar was visible on a Mac.

allan

Debugging this as I type, so bare with me... :-)

$.fn.dataTableSettings[0].oScroll.iBarWidth is 0, which means that when DataTables attempted to calculate the scrollbar width, it was found to be 0.

This is the function that DataTables uses to calculate the scrollbar width:

[code]
function _fnScrollBarWidth ()
{
var inner = document.createElement('p');
var style = inner.style;
style.width = "100%";
style.height = "200px";
style.padding = "0px";

var outer = document.createElement('div');
style = outer.style;
style.position = "absolute";
style.top = "0px";
style.left = "0px";
style.visibility = "hidden";
style.width = "200px";
style.height = "150px";
style.padding = "0px";
style.overflow = "hidden";
outer.appendChild(inner);

document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if ( w1 == w2 )
{
w2 = outer.clientWidth;
}

document.body.removeChild(outer);
return (w1 - w2);
}
[/code]

so I guess the question is, why is your custom styling not being applied to that.

I've added the DataTables function in here: http://live.datatables.net/oriqis/3/edit and annoyingly it appears to make the correct calculation.

Even more annoyingly if I put your CSS:

[code]
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #CCCCCC;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
[/code]

Into my zero config page - which doesn't work:
http://datatables.net/dev/custom_scroll.html

So messing around with the function shows that if the scrolling element is hidden, then the result is different from when it is visible:
http://datatables.net/dev/custom_scroll_visible.html

Doh - Webkit bug... Just downloaded the latest Webkit nightly and the same issue exists.

Test case visible: http://sprymedia.co.uk/media/misc/webkit/custom_scroll_visible.html
Test case hidden: http://sprymedia.co.uk/media/misc/webkit/custom_scroll_hidden.html

Can't find any bugs in the Webkit bugzilla

Webkit bug filed: https://bugs.webkit.org/show_bug.cgi?id=90546

:-)

Allan

macuser

Hope they fix the issue soon. :)

Until then workaround for the issue is as below

"fnDrawCallback": function (oSettings) {
oSettings.oScroll.iBarWidth = 7;
},

Here 7 is the width/height of the scroll bar.

:)

Regards.

allan

You might want to add

[code]
if ( oSettings.oScroll.iBarWidth === 0 )
[/code]

into there, given that the check is correct in other places. Unless you will overly ever be using Webkit of course!

Allan