Horizontal Scrolling Problem

descentintomael

I'm having trouble getting the horizontal scrolling to work in my data tables implementation. I whittled my data table settings down to just those from this example (http://datatables.net/examples/basic_init/scroll_x.html) plus "bJQueryUI": true and horizontal scrolling doesn't work. It just overflows out the side of the table. Is there something I need to do with the div container I have the table in?

ulrike

Did you try initializing your table like this
[code][/code] ?

Or give your table a width of 100% in CSS first ?

[quote]descentintomael said: It just overflows out the side of the table.[/quote]

what is that supposed to mean? do you have an example page?

descentintomael

The table width setting doesn't fix it.

What I mean by overflowing is that the table body overflows past the controls and the containing div. If I were to setup the container div with overflow-x:scroll it keeps the data table inside and scrolls horizontally, but that's not what I want. I want just the body of the table to scroll like in the example.

ulrike

Did you try adjusting these values to your needs :
[code]
"sScrollX": "100%",
"sScrollXInner": "110%",
[/code]

ie. set "sScrollXInner" to "100%" ?

descentintomael

Yes, I tried that.

After some debugging I realized that the problem I'm having is with the fact that the drawing methods in DataTables don't play well with Ajax stuff. It turns out that the autosizing and redrawing all happen before the data has a chance to load. This makes it auto adjust everything to an empty table (which happens to fit nicely in any width).

The solution I have is to have the redraw method trigger another redraw about a half second later. This doesn't always work, but its good enough for now.

ulrike

I see. What about using CSS : table-layout:fixed on your table ?

I also use :

[code]
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
[/code]

Maybe this is adaptable to your case?

descentintomael

Didn't know about that CSS trick, but I doubt it would work since DataTables does its own table layout. Even with AutoWidth turned off it still tries to be smart about the width.

superfox

I've the same problem with table build from ajax source and the columns overflow the width of the table..
here is a live demo: http://tinyurl.com/bwbceb2
the columns and the header cell are not aligned and if you try to order or hide even one column the content overflow the table..

here is the code snippet about the table inizializzation:

[code]
$('#t1').dataTable({
"sAjaxSource": "array.txt",
"bDeferRender": true,
"sDom": 'C<"clear">lfrtip',
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
[/code]

how did you implmented the redraw method?
do you think it colud solve also the disaligned header cell?