width columns problem in Chrome & Safari

berthet

Hi Allan,
First of all I want to congratulate you for your work. Datatables is an incredible tool! Thanks a lot for sharing it!

I have a problem with difference in column width between the headers and the column themselves when datatables is called with sScrollY and when the scrollbar is visible.

When the page is initially open, or refreshed, the header line width is taking the width of all the table, including the scrollbar, so the placement and the width of individual header column is not on the top of the column itself.
Once you click on any header, to sort by one column, everything is magically resetting well until you refresh/reload the page. Note that this problem occurs only in Chrome and Safari. Everything is fine in FF, IE or Opera.

I've try to simplify my problem in a minimal test case. Could you have a look at it and give me any advice or help?
http://test.onelog.be

Thanks a lot,
Philippe.

allan

Hi Philippe,

Thanks very much for posting up the example - it really helps with finding out what is going on!

It's the oddest thing this - and I'm afraid it looks like a bug in Webkit. Basically what is happening, is that DataTables is trying to read the width of the table, that the browser has drawn, so it can make the header match. The problem is that when DataTables does this calculation on your page, the browser hasn't shown the scrollbar - and hence the calculation is slightly wrong! The reason I suggest that it's a Webkit bug, is that, even after DataTables has run through all of it's logic, the scrollbar still hasn't been displayed. If you add the following code you can see the effect of this:

[code]
console.log( $(oTable.fnSettings().nTable).outerWidth() );
setTimeout( function () {
console.log( $(oTable.fnSettings().nTable).outerWidth() );
}, 1 );
[/code]
The output should be:

[code]
952
937
[/code]
The first is what we are getting, even after we've asked for the display to have scrolling and an overflow, but the second is what we want - after the table as been rendered. It would appear that the other browsers get this right. I'll see if I can refine this down a bit and open a bug against Webkit's rendering here.

However, that's not much comfort for getting a site running... What I would suggest is the following workaround:

[code]
var oTable = $('#contactsTable').dataTable( {
"sScrollY": "200px",
"bAutoWidth": false,
"bPaginate": false
} );

if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
[/code]
Webkit is so fast that the user shouldn't see the effect of this, just should just get the correctly rendered table.

Regards,
Allan

berthet

Thanks for your explanations and the workaround fix. It help me a lot!
Regards,
Philippe.

sebmarion

Awesome fix Alan, really helpful for me too!
However, why not just build this fix into datatables itself?

pkacha

Hi Allan,

Thanks for a very good tool.

I have found issue when using scrollY in Safari 1.5.7 and 21.0.1180.60. The width of the coloumns and header increase so that they take the entire width of the page.

i have used the below code u have suggested

var oTable = $('#contactsTable').dataTable( { "sScrollY": "200px", "bAutoWidth": false, "bPaginate": false} ); if ( $.browser.webkit ) { setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 ); }

allan

Please link us to a test page showing the problem. You can use http://live.datatables.net if you don't have a server you can publish the test case on.

Allan

pkacha

Hi Allan,

Thanks for your response, i did tried to debug the problem in URL you have given. When i try to remove
, these two elements i get the same issue.

Here is the URL http://live.datatables.net/ayabah/4/.

Regards
Piyush

allan

Yes, in this situation the table width is 100%. If you want it smaller, just make a containing element with the smaller width that you want, and DataTables will fit inside that.

In my demos the 'container' element is width:800% which is how I get my width for the tables normally.

Allan

mspace

I'm having the same problem here. It works fine (pixel-perfect column aligned) in Mozilla Firefox, Opera but not in Chrome 21.

Solution:

The interesting part is that after I added setTimeout and after it executed there was still one column not aligned. After adding "sScrollX": "100%", "sScrollXInner": "100%" all columns were aligned (pixel-perfect).

My solution for Chrome/Chromium, works ofcource in FF, Opera, IE9:

[code]$(document).ready(function()
{
var oTable = $('#mytable').dataTable(
{
"sScrollY": ( 0.6 * $(window).height() ),
"bPaginate": false,
"bJQueryUI": true,
"bScrollCollapse": true,
"bAutoWidth": true,
"sScrollX": "100%",
"sScrollXInner": "100%"
});


setTimeout(function ()
{
oTable.fnAdjustColumnSizing();
}, 10 );

});[/code]

allan

Can you try with DataTables 1.9.4.dev please? If that doesn't work, then can you link me to the page with the error?

Thanks,
Allan

mspace

I tried with DataTables 1.9.4.dev (nightly) and is the same.

I tested with:
- Windows - IE9, Google Chrome 21.0.1180.89 m, Mozilla Firefox 13, Opera 12.02 build 1578.
- Linux (opensuse 12.1) - Chrome 21.0.1180.57, Mozilla Firefox 15, Opera 12.01 build 1532, Chromium 22.0.1226.0 (149858)

What is not working (I tried yesterday after posting) is if I make browser window smaller than the table minimum width (horizonal scrollbar ofcourse appears). Columns are not aligned in Chrome, IE9, Opera but are in Firefox.

I posted my example on http://live.datatables.net/ehavim. And bigger data http://live.datatables.net/ehavim/2/. When there is a lot of data to be visible misaligned appears in Chrome, IE9. Or even if horizontal scrollbar does not appear but table data is breaked by words (word-wrap: break-word) misaligned appears in Chrome, IE9.

Here is screenshot showing difference between Windows Chrome and Windows Firefox http://www4.slikomat.com/11/0914/jx1-chrome.png

allan

As far as I can tell this is due to the use of border-collapse: collapse; not he table, which makes column measurements nigh on impossible in Javascript land.

If you use border-collapse: separate and a little CSS to simulate the effect, it should work okay: http://live.datatables.net/ehavim/3/edit

Allan

mspace

Thank you Allan, it worked. So whole time setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 ); wasn't an issue. I tried datatables 1.9.3 without setTimeout and it works too with css fix ofcourse.

Js code now:
[code]$(document).ready(function()
{
$('#mytable').dataTable(
{
"sScrollY": ( 0.5 * $(window).height() ),
"bPaginate": false,
"bJQueryUI": true,
"bScrollCollapse": true
});
});[/code]

Thnx again.

allan

Good to hear that worked. Its rubbish that we need to resort to that, but the border collapse makes the layout of the table very complicated, and even although DataTables applies identical widths to the columns in the header and body (since with a scrolling table they are split into two tables) the border-collapse and different content in each table makes the layout completely different!

Think I'll add a blog post or FAQ about this, as its an important point. Thanks for bringing it up.

Allan

tjain1981

I still see a problem with this fix....try minimizing the size of the window OR have lower resolution (1024 * 768) and sort any of the column, u would find misalignment issue is still there