mouseover problem with horizontal scroll
mouseover problem with horizontal scroll
CodeMom
Posts: 4Questions: 0Answers: 0
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,
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,
This discussion has been closed.
Replies
Allan
.dataTables_wrapper {
position: relative;
min-height: 302px;
clear: both;
_height: 302px;
zoom: 1; /* Feeling sorry for IE */
}
Thanks for your fastest answer.
Allan