DataTable horizontal scrolling with jquery Mobile not working - css

Question

When using datatables with jquery mobile, I can not seem to get a horizontal scroller going. I have tried every combination of sScrollX and sScrollY I can think of.
To see an example of the lack of vertical scroller, please try the webapp example I put up here.
On an iphone or some other small screen try the following:
1) Switch the slider from Graph to Table
2) Hit the favorites button
3) Scroll down the left panel and select "MSFT".
You will see only the first few columns. You can scroll up and down but not to the right.
I tried sScrollX and sScrollY but the scrolling is then inconsistent and buggy. At the moment I've disabled both and at least vertical scrolling works ok.
Any help would be much appreciated as I've now been fighting this for a week!
Please find the current datatables code below:
var table = $('#table_container').dataTable( {
"symbol": symbol,
"exchange": exchange,
"aoColumns": columnData,
"aoColumnDefs": [
{ "aTargets": [0], "mRender": function (data, type, full) {return dateFormat(data)} },
{ "aTargets": [1], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [8], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [14], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
],
"aaSorting": [[ 0, "desc" ]],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"bProcessing": true,
//"sScrollX": "100%",
//"sScrollY": "100%",
//"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
"bScrollCollapse": false,
"bServerSide": true,
"sAjaxSource": str,
"bDeferRender": true,
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );

Answer 1

Try like this
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
Refer this Fiddle Demo

Answer 2

Wrap the table in a div.
You can set the overflow value to auto.
<div class="table-container">
<table>
...
</table>
</div>
CSS
.table-container{
overflow: auto
}
another way is to set the overflow to hidden, and then set the overflow-x (horizontal scrolling) to scroll. This has the benefit of also allowing you to set the -webkit-overflow-scrolling to touch, which will allow for momentum scrolling on mobile devices.
CSS
.table-container{
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}

Answer 3

I have inspected the CSS of your APP from the link you provided.
To get the table to scroll in any direction independently you will need to set a desired width and height in your .dataTables_wrapper class. Vertical scrolling works in your APP because the Table is not actually scrolling itself but the Whole Page is. If your APP will not have any other content below the table then the table height can be set all the way to the bottom of the Page or else you will need to have a small Gap at the bottom so a user can touch and scroll further down the Page. Also If you are aiming your app on different mobiles then you need some jquery code to calculate screen size and update the width and height in the .dataTables_wrapper class on the fly so the table will fit the screen from left and right and to the bottom. Any excess width and height will be scrolled if the table contents are longer than the size. If the APP is just for one mobile then its easy to play around with the width and height in the class to get the desired size of the table.
Example
.dataTables_wrapper {
position: relative;
clear: both;
height: 400px;
width: 400px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Your main_container css should be like this, so delete the rest. Otherwise you will have another horizontal scroll bar that does nothing.
#main_container {
overflow: hidden;
}
Although scroll bars are usually hidden from mobile browsers unlike desktop browsers, if you want add this css trick to hide them from view. This trick only works for webkit browsers such as Google/Safari/Native Android etc.
::-webkit-scrollbar {
width: 0px;
}
It may be a good idea to you have Fixed Table Header so a person can see what data relates to the columns when they are scrolling. There are lots of ways to achieve this, below i added a link i found
http://fixedheadertable.com/