sWidth is not adjusting my column sizes correctly.

glennr

I have a datatable which displays in a popup dialog

<

div>. In javascript I retrieve the popup dialog HTML from the server via AJAX, replace the innerHTML of the dialog with the HTML including the datatable. Then I initialize the datatable and open the dialog. The dialog opens with the table displayed as a datatable. But, the column headers are not formated to the correct width based on my sWidth column settings. The body columns are formatted to correct width. So, I end up with the headers and rows formatted to different widths. The headers are all really narrow and all the way to the left. However, once I click on one of the header rows to change the sort order the header columns adjust to the correct widths.

I used the DataTable debugger page to submit my code. The Debug Code is: avoheq

My initialize code for the datatables object is:
var tblOData = $('#tblOffData').dataTable( {
"bJQueryUI": true,
"sScrollY": "390px",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bPaginate": false,
"bScrollCollapse": true,
"bAutoWidth": false,
"bSortCellsTop": true,
"aoColumns" : [
{"sWidth":"30px" },
{"sWidth":"48px" },
{"sWidth":"48px" },
{"sWidth":"278px" },
{"sWidth":"96px" },
{"sWidth":"96px" },
{"sWidth":"50px" },
{"sWidth":"78px" },
{"sWidth":"75px" },
{"sWidth":"75px" },
{"sWidth":"46px" },
{"sWidth":"25px" }
],
"aoColumnDefs" : [
{ "bSortable": false,
"aTargets": [ "no-sort" ] }
],
"aaSorting": [[ 0, "asc" ]] // asc or desc
});

Rpiechura

Generally speaking, a common trend I'm seeing with people who bring issues like this up is that it's a CSS issue, so I'd look there first and see if there is something simple that you need / want to change to make them work properly.

lib

Humm, I'm also having this problem. I'm trying to set the width of a hidden by default column when the user selects it to be shown.

allan

Can you link to a test case showing the issue please.

Allan