Draw problem in Google Chrome

tib

I initialize my table with

[code]



Serial
Action





$('#available_serials_table').dataTable({
"aaSorting": [[0,'desc']],
"sPaginationType": "full_numbers",
"aoColumns": [
{"sName": "serial", "sClass": "nowrap"},
{"bSortable": false, "fnRender": function (oObj) {
return "Delete";
}, "sWidth": "10%"
},
{ "bVisible": false }
],
"iDisplayLength": 16,
"aLengthMenu": [[8, 16, 32, 64, 128, 256, -1], [8, 16, 32, 64, 128, 256, "All"]],
"bProcessing": true,
"bServerSide": true,
"sDom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>',
"sAjaxSource": '/sm/serialsbunch/query_get_available_serials.php',
"bSortClasses": false,
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({"name": "ctype", "value": $('#ctype').val()});
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
[/code]

And it looks good in IE and Firefox, but in Chrome in unpredictably changes. I do nothing, just refresh the page, and results are:
http://lh6.ggpht.com/_7SQvVi4X2Go/TRsrkjc45gI/AAAAAAAAAA8/VBLNoLGg8b8/shrinked.PNG
or
http://lh4.ggpht.com/_7SQvVi4X2Go/TRsrk76lmDI/AAAAAAAAABA/bNmZVenJhdE/expanded.PNG

In IE and Firefox it is always like on "expanded" picture.
tables.css is like in DataTables.zip -- changed only .th classes. Version 1.7.5. What could it be?

Thanks,
Egor

allan

Have you got #available_serials_table { width: 100% } or similar in your CSS somewhere?

Allan

tib

No, there is only
table.display { width: 900px; },
but it doesn't work! I investigated this case and found:

http://lh6.ggpht.com/_7SQvVi4X2Go/TRwnldQgMtI/AAAAAAAAAKk/3XqW-CsPpWA/s912/shrinked2.PNG

Table style overlap table.display style, and I think that's why table looks shrinked. But I can't understand why these styles are added! In Firefox same styles are added, but 900px as in table.display. There is no such definition in code. Can it be that dataTables adds it?

allan

Yes, DataTables will add a width style to the table if auto width calculation is enabled, to try and stop the table for changing size when paging, which is distracting for the user. What I don't understand though is why it would draw it so small... Are you able to give us a link to the page so I can see it in action?

You could try disabling auto with calculations with bAutoWidth: false, and see if that helps.

Allan

tib

Thanks, Allan, that helped :) I set table.display { width: 100%; }, set bAutoWidth: false and now it's always look like "expanded" picture upwards.

Sorry, can't give you link because it's on our internal server and can't be opened outside. But I can mail you if you want full source codes of my template and tables.css.