Header not resized properly on init (from hidden div)

fbas

The problem seems to be related to the table being initialized inside a hidden div (which becomes unhidden by FancyBox later).

My header columns are not sized properly (though the scroll body is). The header widths are initialized to 0px.

[code]
oSettings = {
"sDom": 't',
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"oLanguage": { "sSearch": "Filter:", },
"sScrollY": "150px",
"asStripeClasses": ['oddListRowS1','evenListRowS1'],
"aaData": result.aaData,
"aoColumns": [
{ "mData": "name", "sWidth": "60%" },
{ "mData": "location", "sWidth": "40%"},
],
"bDestroy": true,

};
equip_table = $('#equipment_table').dataTable(oSettings);


[/code]

http://i.imgur.com/k8KOEeG.png

/*
Edit: I thought I was able to override the col header width in code after init, but that isn't working

I can access the TH elements, but can't seem to change the css width...

$('#equipment_table_wrapper div.dataTables_scrollHead table thead th:first').css("width", "240px");
$('#equipment_table_wrapper div.dataTables_scrollHead table thead th:eq(1)').css("width", "159px");

*/

fbas

was able to get the workaround to play nice (though it doesn't perfectly line up), after also forcing the table width:
$('#equipment_table_wrapper div.dataTables_scrollHead table').css("width", "360px");

what frustrated me was that setting css with a % did not work: .css("width", "100%") and I wasted a bit of time pulling my hair out about that.

--------

but back to the original question. is there a way to get the init to work properly if the containing div is hidden?

cyates

I am experiencing this same issue and this seems to me to be a major problem. I would imagine it would be often that a DataTable would have to be initialized while in a hidden container for later use.

I am also experiencing a problem where when I resize the window the scroll body resizes fine but the headers do not.

Any help with these issues would be greatly appreciated.

cyates

Update: I found out a workaround, call oTable.fnAdjustColumnSizing(true) when you show the container.

For the resizing issue you have to specify width="100%" on the table, you can't use css.

Thanks.