Misalignment with fixed header
Misalignment with fixed header
cdewsnip
Posts: 3Questions: 0Answers: 0
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/
http://thinkoffices.co.uk/test-centre-list/
This discussion has been closed.
Replies
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
Naphier, thanks for your help too. I'll take a look at this now.
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
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.
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
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
Thank you!
---
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.