width columns problem in Chrome & Safari
width columns problem in Chrome & Safari
berthet
Posts: 2Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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
Regards,
Philippe.
However, why not just build this fix into datatables itself?
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
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
In my demos the 'container' element is width:800% which is how I get my width for the tables normally.
Allan
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]
Thanks,
Allan
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
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
Js code now:
[code]$(document).ready(function()
{
$('#mytable').dataTable(
{
"sScrollY": ( 0.5 * $(window).height() ),
"bPaginate": false,
"bJQueryUI": true,
"bScrollCollapse": true
});
});[/code]
Thnx again.
Think I'll add a blog post or FAQ about this, as its an important point. Thanks for bringing it up.
Allan