Vertical scrollbar width not factored into header width

WeaponX86

Using 1.9.0 Feb 1st 2012

I need vertical and horizontal scrollbars, and the datagrid will be fluid horizontally. The issue is compounded when I try to add padding to the header or body cells.

Scrolling all the way right:
http://i.imgur.com/dZ1to.jpg

Scrolling almost all the way right:
http://i.imgur.com/aOosR.jpg

Live example:
http://dev.propertypreswizard.com/test_scripts/beta/data.html

Initialization:
[code]
var oTable = $('#work_orders').dataTable({
"sScrollX": "100%",
"sScrollY": "400px",
//"bPaginate": false,
//"sScrollXInner": "100%",
//"bScrollCollapse": true,
"iDisplayLength": 50,
"bFilter": true,
"bSort": true,
"sDom": '<"form-header clearfix"lf>rt<"form-footer clearfix"ip>',
"aLengthMenu": [50,100,250,500],
"sPaginationType": "full_numbers",
"aaData": flatten_assoc(json_arr),
"aoColumns": aoColumns
});
[/code]

CSS:
[code]

/*********************************
* jQuery DataTables
**********************************/
.dataTables_length {
float: left;
width: 40%;
}

.dataTables_filter {
float: right;
text-align: right;
width: 50%;
}

.dataTables_info {
float: left;
width: 50%;
vertical-align: middle;
/*min-height: 100%;*/
/*position: absolute;*/
}

.dataTables_paginate {
float: right;
text-align: right;
}

/* Fix table margin from typography.css */
/*.dataTables_wrapper .dataTable {
margin: 0px;
border-collapse: collapse;
}*/

.dataTables_wrapper .dataTables_scrollHeadInner table{
margin: 0px;
border-collapse: collapse;
}

.dataTables_wrapper .dataTables_scrollHead {
background-color: #e6e6e6;
}

.dataTables_wrapper .dataTables_scrollHeadInner th {
background-color: #e6e6e6;
white-space: nowrap;
/* border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #b2b2b2;*/
border: 1px solid #D3D3D3;
text-align: center;
font-weight: 600;
/* padding-right: 1em;
padding-left: 1em;*/
}

.dataTables_wrapper .dataTables_scrollHeadInner th.sorting_asc {
background-image: url(css/images/sort_asc.png);
background-repeat: no-repeat;
background-position: right center;
}

.dataTables_wrapper .dataTables_scrollHeadInner th.sorting_desc {
background-image: url(css/images/sort_desc.png);
background-repeat: no-repeat;
background-position: right center;
}

.dataTables_wrapper .dataTables_scrollHeadInner th.sorting {
background-image: url(css/images/sort_both.png);
background-repeat: no-repeat;
background-position: right center;
}

.dataTables_wrapper .dataTables_scrollBody td {
white-space: nowrap;
overflow: hidden;
/* padding-right: 1em;
padding-left: 1em;*/
}

[/code]

allan

Thanks very much for the details! Unfortunately this is a bug introduced in 1.9 ( http://datatables.net/forums/discussion/8332/datatables-1.9.0-released#Item_8 ). I'm working on a fix and hope to have it done within the next day or so.

Regards,
Allan

WeaponX86

Thanks, I'll look out for it. On a similar note, can I use css to pad the header or will that throw off the alignment? The problem now is the sort indicator overlaps header text.

allan

I've just committed a fix which you can get using the "nightly" on the downloads page: http://datatables.net/download / I've also added unit tests to stop it happening again, but I'd be most interested to hear how you get on with the fix - I'd like to be 100% certain that I've fixed it fully this time!

> On a similar note, can I use css to pad the header or will that throw off the alignment? The problem now is the sort indicator overlaps header text.

You can certainly pad the header cells yes (I use that in my own demo CSS).

Allan

WeaponX86

Scrolling works perfectly.

I'm still having trouble with padding the cells, in this example I have the following css applied to the header th and body td:
[code]
padding-right: 1.4em;
padding-left: 1.4em;
[/code]

Live example:
http://dev.propertypreswizard.com/test_scripts/beta/data.html

Is there some way I can pad the header cells and have perfect column alignment?

allan

I think the problem is that your selector for the padding is too selective :-)

Currently you have:

[code]
.dataTables_wrapper .dataTables_scrollHeadInner th {
[/code]

However, the column width calculation is not done in "dataTables_scrollHeadInner" - its done in with the main table. As such, I think if you do this it should be good:

[code]
.dataTables_wrapper thead th {
[/code]

Allan

WeaponX86

Hot damn you're right. It looks awesome now.

WeaponX86

I tested this in Firefox 10, Chrome 16, and IE9 and it looks great (In Windows), however, on OSX Firefox and Chrome are not aligning the header and body properly.

Chrome Screenshots:

Scroll all the way left:
http://i.imgur.com/AfJSA.jpg

Scroll all the way right:
http://i.imgur.com/m7dCB.jpg

It seems like it's trying to factor in scrollbar width, but OSX uses ghost scrollbars. Any clues?

allan

Just been looking into this a bit and DataTables correctly calculates the scrollbar width as 0 with using the new Lion hidden scrollbars - so I don't think it is that which is knocking stuff out here - there is something else at play. I'll take a look and get back to you.

Allan

WeaponX86

I don't know if this helps but if I click a sort column, the columns align properly on OSX.

pankaj

hi,
I am facing the same problem, but using nightly js also, it is still not working.

any help would be appreciated.