Using ascrolly, column header width does not match body column widths

Kaosweaver

I'm using jQuery 1.4.2, UI 1.8.2 and datatables (1.7.6).

The headers don't line up with the column widths - however, sort a column and they snap to it, examples:
http://www.kaosweaver.com/datatables/table1_before.jpg
http://www.kaosweaver.com/datatables/table1_after.jpg

http://www.kaosweaver.com/datatables/table2_before.jpg
http://www.kaosweaver.com/datatables/table2_after.jpg

http://www.kaosweaver.com/datatables/table3_before.jpg
http://www.kaosweaver.com/datatables/table3_after.jpg

Here is the code I'm using:

[code]
curr_list_manager=$('#curr_list_manager').dataTable( {
"aaSorting": [[ 0, "asc" ]],
"sScrollY": 300,
"bPaginate": false,
"aoColumns": [
{ "sWidth": "15%" },
{ "sWidth": "59%" },
{ "sWidth": "6%" },
{ "sWidth": "20%" }
]
});
staff_table_manager=$('#staff_table_manager').dataTable( {
"aaSorting": [[ 0, "asc" ]],
"sScrollY": 300,
"bPaginate": false,
"aoColumns": [
{ "sWidth": "20%" },
{ "sWidth": "40%" },
{ "sWidth": "20%" },
{ "sWidth": "20%" }
]
});
assign_course =$('#assign_course').dataTable( {
"aaSorting": [[ 1, "asc" ]],
"aoColumns": [
{ "sSortDataType": "dom-checkbox" },
null,
null
],
"sScrollY": 300,
"bPaginate": false,
"aoColumns": [
{ "sWidth": "5%" },
{ "sWidth": "75%" },
{ "sWidth": "20%" }
]
});
[/code]

Here is the generated code from the page for the table header and the content table header:
[code]






Member Name
Login
Type
Maintenance















[/code]

This holds for whatever browser I'm using. I've been trying my best searches to find something that applies to this and I've come up empty. The bjqueryui tag doesn't do anything to fix this issue.

If someone knows of the thread in the forum on this and/or could point me in the right direction, I'd be most grateful as I'm pretty certain I've done something wrong.
Thanks
Paul

allan

Hi Paul,

Are the tables in a hidden element when they are initialised? If so - that's what the problem is. Basically the browser won't calculate the height / width of elements which aren't displayed (since they don't have any height or width!) - thus the columns go wrong.

The way to "fix" this is to call the API method fnAdjustColumnSizing ( http://datatables.net/api#fnAdjustColumnSizing ) after the table has been made visible (assuming that this is what the problem actually is of course!). So something like: curr_list_manager.fnAdjustColumnSizing() should bring the columns into alignment.

Regards,
Allan

Kaosweaver

Allan,
They are in the tabs for jquery UI, the first one is displayed when the page loads.
I added the code to the tabs (onclick) and I also added one in the script loading section for the initial screen - they because totally collapsed (one right after the next).

I appreciate the help, is there anything else I could look at - or do you need to see it working to see the issue?

allan

Hi Paul,

Brilliant - yup it's the tabs that are effectively causing the issue. They aren't doing anything wrong - it's just the sequence of events needs to be taken into account.

Have a look at this example: http://datatables.net/examples/api/tabs_and_scrolling.html . There is a code clip there which you can use to fix the issue. It basically listens for the tab change and will call the fnAdjustColumnSizing method when needed.

Regards,
Allan

Kaosweaver

YEAH!
Had to manipulate my code to handle the example code (needed to get the class "display" on my tables too) in order for it to work, that was a little tricky - but thanks, it is working now. I super appreciate the fast help. You rock!
Paul

allan

Good to hear that works :-).

The class 'display' is just a helper I tend to use - it should be possible to pick the table up using a number of other queries - but as long as you've got it working... :-)

Regards,
Allan