Misalignment with fixed header

cdewsnip

I'm using the fixed header functionality from DataTables through TablePress and when the form first loads the fixed header is misaligned. As soon as you scroll the page it appears to fix itself. Any ideas why this would be? I've spoken to the developer of TablePress who felt that it was related to DataTables rather than the TablePress plugin. Thanks so much in advance for your help.

http://thinkoffices.co.uk/test-centre-list/

naphier

Here's a basic fix
http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

However, I'm still getting issues on my tables, but not as often.
My full setup is like this:
[code]

$(document).ready(function() {
$("#user_table").dataTable( {
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"sScrollY": "400px",
"sScrollX": "800px"
});
} );

var oTable = $("#user_table").dataTable( {
"sScrollY": "400px",
"bAutoWidth": false,
"bPaginate": false,
"bFilter": true,
"sScrollX": "800px"
} );

if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 500 );
}

[/code]

I've tried different things to get it to work, like changing the timeout value and changing flags around.
I'm not sure what more to do for a workaround, but it would be great if the fix was built in. I'm amazed that it is the first issue I see on discussion just after downloading it. If Allan can provide a fix I will happily donate!

allan

Can you link to a test case so I can take a look at what is going wrong and hopefully fix it.

Allan

cdewsnip

Hi Allan, you can see this in action on this page here: http://thinkoffices.co.uk/test-centre-list/. I am viewing it in Firefox. Thanks so much.

Naphier, thanks for your help too. I'll take a look at this now.

allan

Thanks for the link.

Could you try:

[code]
$(window).on( 'load', function () {
new FixedHeader( oTable_tablepress_4 );
} );
[/code]

For the creation of the FixedHeader? I'm thinking the image might be knocking it out of alignment once it has loaded.

Allan

naphier

Hi Allan, sorry for the slow response for getting you a source link. Out page is generated with PHP and MySQL, so I had to scrub some sensitive data out of it. At any rate, here it is:
http://wordspionagedb.com/stat_test.html

Please note that I've also made changes to your jquery.dataTables.css and named it my_jquery.dataTables.css under the same directory that this page lives.

It seems to happen whenever there is a change in window size and the page is reloaded (but not all the time). I truly appreciate the help.

allan

@naphier - Thanks for the link. I don't think this is the same issue as @cdewsnip was seeing since you aren't using FixedHeader.

It looks like you a re initialising your table twice - is there a reason for that? I'm actually very surprised that DataTables isn't getting all upset and giving a warning about that.

Also your second initialisation and the setTimeout are occurring outside the document ready function - and thus might occur before the document is... ready :-). That might well be part of the issue as well.

Allan

allan

Actually - thinking about it, I've just realised why DataTables isn't throwing an error and why the setTimeout is.

Because your 'second' initialisation of DataTables is outside the document ready function it is running first, but there is no element that matches, so jQuery does nothing. Then when the timeTimeout runs oTable doesn't have a fnAdjustColumnSizing function, thus it gives an error.

Try:

[code]
$(document).ready(function () {
var oTable = $("#user_table").dataTable({
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"sScrollY": "400px",
"sScrollX": "800px"
});

if ($.browser.webkit) {
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 500);
}
});
[/code]

The setTimeout stuff shouldn't be required, but I guess if it does the job for you...

Allan

naphier

Works perfect now. I had just made some guesses on the usage of the other code example and apparently I need to spend a little time learning javascript (most of my time is in PHP and MySQL).
Thank you!

cdewsnip

Hi Allan, thanks for your suggestion re the fixed header. I've passed in on to Tobias (I'm not a dev) and he's come back with the following:

---

Hi,
yes, it's likely that this issue gets fixed in a future version of the FixedHeader JS script. I'll of course release a new version of the Extension, too, after a new release. At the moment, I'm just waiting for a large new release of the DataTables library itself (see http://next.datatables.net/ for impressions).
Now, Allan (the DataTables developer) made a good suggestion in the thread that you opened there. He's basically saying the image in the header is throwing the calculation of, because it might not finish loading until after the position for the Fixed Header row is done. To work around that, he suggest to initialize the FixedHeader on a different JavaScript event in the browser (one that occurs after images have finished loading).
Unfortunately, I'm not yet sure what the best process would be to really do this in TablePress, as it would require changes to the FixedHeader TablePress Extension :-(
Regards,
Tobias

---

I'm not sure how to progress this further so I have disabled it for now and am hoping it will be resolved in a future update as we would really like to use it. Thanks again for your help though.