Table headers misaligned when using Tabs and Scroll

nscottbrown

I'm having simalr issues to this posting

http://datatables.net/forums/discussion/18156/table-column-headers-misalinged-when-in-jquery-tabs-sscrollx-set/p1

However the suggestions made don't seem to solve my issue. I have the following code. When ever the tables refresh my code stops processing at $( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();

Here is my code



$(document).ready(function() {
$("#tabs").tabs( {
"show": function(event, ui) {
alert("here");
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust(); //THIS IS THE LINE THAT MY CODE STOPS PROCESSING
}
} );

$('table.display').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
"bjQueryUI": true
} );
} );





Any suggestions would be helpfull

Thank you
Scott

allan

Hi Scott,

And you link to a test case (as noted in the forum rules) so I can take a look and try to help debug it.

Allan

nscottbrown

Allan,

Thanks for your help. Here is a link to a test case that I've been using.

http://cosys.carefitllc.com/test_case.php

I currently have this line commented out. If I don't have it commented it out it will not finish rendering the page. If I do have it commented it out, the page will finish rendering however the col headings on the 2nd tab do not align properly.

$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();

If I comment out this line and comment out the lines for "sScrollX": 100% the tables render correctly. However I don't have the scroll bar features anymore.

allan

Hi Scott,

Thanks for the link. That line of course you were using won't work with your version of DataTables (v1.8.0). That line uses the new API in DataTables 1.10. If you update to the latest version it should start working.

You might also want to check the release notes for the 1.9 and 1.10 upgrades:

http://next.datatables.net/new/1.9
http://next.datatables.net/new/1.10

Allan

nscottbrown

Allan,

I'm still very new to this, but I thought I downloaded 1.9.4 How were you able to determine I was using 1.8?

allan

You load this file: http://cosys.carefitllc.com/js/jquery.dataTables.js :-)

Also, if you type the following on the browser's console it says the version number: $.fn.dataTableExt.sVersion

Allan

nscottbrown

Allan,

Thanks that seems to have been my issue. I uploaded the 1.9 version. However I have another script with the same JQuery script and the first tab is still not aligned properly. The 2nd tab on this other script is correct. The only difference I can tell between the two tabs is that the first tab is generated with some php code that pulls data from my database and the 2nd tab is static data, copied and pasted from my first test case I gave you.

The test case that I gave you earlier works like it should. Both tabs are static data and both tabs line up properly. Here is a link to my 2nd test case

http://cosys.carefitllc.com/my_orders2.php

Here is the link to my first test case again

http://cosys.carefitllc.com/test_case.php


Any ideas as to why my 1st tab in my_orders2.php do not line up properly?