mouseover problem with horizontal scroll

CodeMom

Hi Allan, first at all thanks for all the effort you include to develop this project. It is long time on support and deployment.

I have been using this plug in for almost a year, and now I found a weird problem.

I have a customer who wants to manage easily most of the display resolutions. I found a good way using the horizontal scroll for some tables with lot of columns. At start everything works perfectly, however if for some reason the user pass over horizontal scroll bar (multiple times), scroll bar will be floating down and up... pretty funny. I could not show a public site, but here you have a screen shot.

http://www.4shared.com/photo/eJ9kpWvT/datatables_screen.html

here if part of the code

dataTable = $('#tablediv').dataTable({
"bServerSide": true,
"sAjaxSource": "my siteurl",
"sAjaxDataProp": "aaData",
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 15,
"bAutoWidth": true,
"sDom": '<"H"<"clear">lT>rt<"F"ip>',
"bDeferRender": true,
"bJQueryUI": true,
"sScrollX": "100%",
"sScrollInnerX": "110%",
"sScrollCollapse": true,
"aLengthMenu": [[15, 30, 50, 100, -1], [15, 30, 50, 100, "All"]],
"aoColumns": [
{ "mDataProp": "WorkAuthorizationNumber" },
{ "mDataProp": "WorkOrderNumberStringToExcel" },
{ "mDataProp": "WorkOrderNumber" },
{ "mDataProp": "ReceiveDate" },
{ "mDataProp": "WorkAuthorizationStatusCode" },
{ "mDataProp": "Location" },
{ "mDataProp": "WorkAuthorizationID" }
],
"aaSorting": [[3, 'desc'], [0, 'asc']]
]
});

$('#waStatus').change(function () {
cell = $("#waStatus");
dataTable.fnFilter($(this).children(":selected").val(), $("tfoot th").children().index(cell));
});
$("tfoot input").each(function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").keyup(function () {
/* Filter on the column (the index) of this element */
dataTable.fnFilter(this.value, $("tfoot th").children().index(this));
});

$("tfoot input").blur(function (i) {
if (this.value == "") {
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
});





1840 Serial Number
Work Order Number
Work Order Number
Reception Date
Status
Location
Actions




















@Html.DropDownList("waStatus", (IEnumerable)ViewData["Statuses"], new { style = "color: #999;font-size:small;" })








Thank you for your help,

allan

That's a bit odd! Are you using DataTables 1.9.2, and not have a minimum height anywhere in your CSS?

Allan

CodeMom

I am using DataTables 1.9.0, and looked in the css and found this:

.dataTables_wrapper {
position: relative;
min-height: 302px;
clear: both;
_height: 302px;
zoom: 1; /* Feeling sorry for IE */
}

Thanks for your fastest answer.

allan

Ah yes - that has been removed form the latest DataTables. Good to hear you got it working as you want.

Allan