Horizontal Scrolling Problem
Horizontal Scrolling Problem
descentintomael
Posts: 4Questions: 0Answers: 0
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?
This discussion has been closed.
Replies
[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?
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.
[code]
"sScrollX": "100%",
"sScrollXInner": "110%",
[/code]
ie. set "sScrollXInner" to "100%" ?
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.
I also use :
[code]
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
[/code]
Maybe this is adaptable to your case?
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?