table is wider than containing element

beginner_

Hi all,

the datatable I create turns out wider than the div it is contained in. I tried using bAutoWidth: false and setting column width manually but that changed nothing. Containing div is 1000px while the table is always 1017px (accordign to firebug). Note that in IE 8 the table is too wide too.

[code]
$('#result').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "getDataJSON.php",
"iDisplayLength": displayLength,
"aLengthMenu": [[1, 2, 3, 10], [1, 2, 3, 10]],
"sScrollY": scrollY,
"sPaginationType": "full_numbers",
"bSort": false,
"bFilter": false,
"bAutoWidth": false,
"aoColumns": [
/* Structure */ {"bSearchable": false, "bSortable": false, "sWidth": "200px"},
/* Data*/ {"bSearchable": false, "bSortable": false, "sWidth": "700px"}
],
//...
[/code]
if I make the second column very small like 200px the first column gets wider (=a lot more than the specified 200px)

I'm kind of lost on how to solve this. Any Ideas?

allan

Can you link us to an example of this please? What browsers does this occur in?

Allan

beginner_

Can't, it is not publicly available.

Affected browsers are IE8 and FF 9.0.1 but possibly other versions and browsers.

Screenshot of the issue:

http://imageshack.us/photo/my-images/836/datatabletoowide.png/

Note:

I use fnRender. Can this affect the sizing?

allan

No, fnRender will not affect this. Does it work if you re-enable bAutoWidth?

I'm afraid I'll not be able to offer much help without a test case so I can reproduce the issue, since otherwise i'm just shooting in the dark.

Allan

beginner_

re-enabling bAutoWidth did nto change anything. Also as additional comment I use datatables and the same layout (html/css) in other places and there the issue does not occur.

After a lot of thought i realized the difference between the apps:
In this one affected by the problem i set yScroll so that is should fit to the screen resolution (no scroll bars visible) while the paging controls remain at a fixed place (which IMHO is very important for good usability). row height may be different per row.

Anyway if i display more records than fit in yScroll and scroll bars become visible, the table is sized correctly (1000px wide)!!! Since scrollbars are displayed in all other apps i use datatables, i didn't realize this till now.

See this screenshot. Same as above but more records per page and hence scroll bars displayed:

http://imageshack.us/photo/my-images/217/datatablecorrect.png/

Eg i guess its a bug.

EDIT:
And i just realized this bug is fixed in 1.8.2 (had 1.8.1)