Horizontal scroll broken in FireFox

Ironwil616

This might not be a bug, but instead a mistake on my part. When I open datatables in FireFox with horizontal scrolling enabled, the generated div "dataTables_scrollHead" is rendered WAY off to the right, about 300 px. In IE 9 and Chrome this div is rendered in the correct place. Since nearly all of my users access this page through IE, it would not be a terribly important issue, but in IE8 apparently the horizontal space isn't resized correctly when someone hides a column. So, I opened it in Chrome and FireFox to attempt to fix this issue, and discovered the crazy scroll header rendering. My init code looks like this:

[code]
// <%: Model.HtmlID %> is an ASP.NET MVC code nugget tag, in case anyone was wondering.
var oTable = $('#<%: Model.HtmlID %>').dataTable({
"bStateSave": true,
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"bScrollCollapse": true,
"sDom": 'RC<"clear">lfrtip',
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sAjaxSource": "/MyController/DataMethod",
"aoColumns": [
{ "mDataProp": "ID" },
{ "mDataProp": "Name" },
{ "mDataProp": "Description" },
{ "mDataProp": "CourseNumber" }
// Many columns left out for brevity.
],
"fnServerData": function (sSource, aoData, fnCallback) {
// Add some data to send to the source, and send as 'POST'
var status = $("#SelectStatus").val();

// Drop-down list filters.
var typeID = $("#Type").val();

aoData.push(
{ "name": "status", "value": status },
{ "name": "typeID", "value": typeID } );

$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(aaData){
fnCallback(JSON.parse(aaData));
}
});
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull)
{
// Each row is clickable, allowing a user to view details of that line.
$(nRow).attr("id", aData["ID"]);
return nRow;
},
"fnDrawCallback": function() {
// This css assignment was necessary to avoid a weird IE bug where hovering over a row
// added empty space beneath the table.
$(".dataTables_scrollBody").css("overflow-x", "scroll");
setRowEvents();
},
"oLanguage": {
"sSearch": "Filter:"
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [0, 3, 26, 27, 28, 29] },
{ "sClass": "centered", "aTargets": ["centered"] }
]
});
[/code]

OK, one of the requirements for this table was that the text for each table cell must only take up one line. In order to know how many characters each column could hold, I had to know exactly how wide each table data cell was going to be, and assigning that in the init code for datatables didn't work for me. It seemed more like a general estimation than exact size. When debugging in Chrome, it would show that the cells were not the specified pixel width, though they maintained their ratio to each other (column assigned 150px width would be about twice as wide as one assigned 75px). Since even assigning the table cells a width doesn't work when the content is longer than that, I placed a div inside the header cells and gave that an explicit width. It was ugly and clunky, but I just could not get the widths to remain as they should without this.

Looking at my init code, you'll notice that I don't have a 'sScrollXInner' statement. That's because when I add that in, the table gets completely hosed. The table in the horizontal scroll area gets squished, all the column widths much narrower than they should be. This might have something to do with the div inside of the table headers - I don't know. Aside from this, everything else is now working well. I just need some way to fix the horizontal scroll rendering.

allan

My guess is that you'll need to add

[code]
table { clear: both; }
[/code]

to your CSS.

However if that doesn't do it, could you link us to your example please?

Thanks,
Allan

raffaele

i have the same problem on Firefox.

This is my code

[code]
var oTable = $('#mws-table').dataTable( {
"oLanguage": {"sUrl": "plugins/datatables/it_IT.txt"},
"iDisplayLength": 10,
"bFilter": false,
"sScrollX": "100%",
"sScrollXInner": "240%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "include/ajax/proxy.php?ajaxOP=1"
} );
[/code]


this is the result

http://i.imgur.com/nfRBh.jpg

raffaele

ok, sorry... solved with

[code]
.dataTables_scroll {
clear: both;
}

.dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch;
}
[/code]