Table too wide

Gerardo

Despite bAutoWidth, the (competey dinamically generated) table ends with a style "margin-left: 0pt; width: 100%;" I don't understand where it comes from.

This obviously changes the width of every column. I ended up doing:

[code]
$("table.display").css("margin", "auto");
$("table.display").css("width", "0");
width_px = $("#hands").width() + "px";
$("div.fg-toolbar").css("margin", "auto");
$("div.fg-toolbar").css("width", width_px);
$("div.display").find("thead").css("margin", "auto");
$("div.display").find("thead").css("width", width_px);
[/code] at the end of fnDrawCallback() as a workaround, would prefer to fix it in the original place, if I can find it, any idea?

allan

What is your DataTables initialisation? Are you using scrolling or anything else? Typically what I would recommend is to simply put an element around the table, a wrapper, which you can use to constrain the width of the table and all of the elements DataTables adds. This makes size calculations much easier for the table.

Allan

Gerardo

hi Allan, thanks.
The initialization is:

"bPaginate": false,
"bProcessing": true,
"bJQueryUI": true,
// "bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": Math.round(0.7 * $(window).height()),
// "bServerSide": true,
"sAjaxSource": "hands.php",

11 rows, 9 visible, 2 hidden. they take 100% of the width of the screen even when

[code]
table.display {
margin; auto;
width; 0;
clear: both;
border-collapse: collapse;
}
[/code]

Someone is adding this fixed style, which takes precedence.

allan

It's the scrolling which is doing that. Basically what is happening is that DataTables is finding that it can't draw the table in the width that has been given and therefore overrules that - a width of 100% is assumed on scrolling tables. There are some prevention methods internally from doing anything absolutely daft with the width, and it will of course try to retain your original styles, but in this case it is just isn't possible to draw the table in 0px!

So a work around is to put a wrapper element around the table and use that to control the width. It's also a lot more actually in terms of pixels since tables can be influenced by a wide variety of parameters.

Regards,
Allan

Gerardo

I added width 0 as an afterthought, as then the autowidth started working.

With no width defined it takes 100% too.

And indeed scrolling is the responsible, when taken off table looks good.

It seems scrolling does not like autowidth, or gets confused by it.

Can you point to me where is this code in scrolling?

Thanks,
Gerardo

Gerardo

I added width 0 as an afterthought, as then the autowidth started working.

With no width defined it takes 100% too.

And indeed scrolling is the responsible, when taken off table looks good.

It seems scrolling does not like autowidth, or gets confused by it.

Can you point to me where is this code in scrolling?

Thanks,
Gerardo

allan

The code of interest are the lines:

[code]
/* No x scrolling */
o.nTable.style.width = "100%";
[/code]
in _fnScrollDraw. However, I would normally recommend that scrolling be used with auto width in order to get the column calculations correct. As I say - the width 100% on the table makes the column sizes a lot easier to work with. If you want to constrain the table, then the easiest way is to simply use div.dataTables_wrapper { width: whatever; } and then let the table inside that container do what it needs to do.

Allan

Gerardo

I am using scrolling with auto width :-) Or did you mean against it?

Gerardo

[code]
$("table.display").css("width", "0");
width_px = $("#hands").width() + "px";
$("table.display").css("width", "100%");
$("#hands_wrapper").css("margin", "auto");
$("#hands_wrapper").css("width", width_px);
[/code]

Almost perfect. SCroll bar is inside the table width, though, so a there is a small scroll X.
So width_px should be $("#hands").width() + SCROLL_BAR_WIDTH + "px".
Tried 12, works fine.

Table centered, auto width working, scroll bar working, next to the table, thead and tfoot centered too.

Only thing left is THs, they start at same place as the others but are much longer than the actual column content. From here, any redraw aligns it with the rest of the table, but globally, invividual THs have different widths and/or different placement and the related TD columns.

Thanks,
Gerardo

allan

Because you are adjusting the table width after the column calculations have been done, you'll need to call fnAdjustColumnSizing ( http://datatables.net/api#fnAdjustColumnSizing ) to have DataTables do the calculations again.

Allan

Gerardo

Calling fnAdjustColumnSizing from inside fnDrawCallback makes it hang, probably circular calls?

Thanks,
Gerardo.

Gerardo

Never mind, must be called with the false parameter (else redraws, calls fnDrawCallback, calls fnAdjustColumnSizing, ad infinitum.

Thanks,
Gerardo