Scroll bar issue in IE when row reordering with data tables
Scroll bar issue in IE when row reordering with data tables
DavidJoyce
Posts: 0Questions: 0Answers: 0
We are using the popular JQuery Datatables plugin as well as its corresponding Row Reordering plugin.
Our datatable contains a scroll bar.
A problem arises in IE8, whereby the scrollbar does not move when you attempt to drag a row from the bottom to the top. This works fine in Chrome and Firefox, and does not produce any JS console error in IE. I am at a bit of a loss on how to troubleshoot this, so would appreciate any advice on how to get started?
The following is my datatable setup:
[code]
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
Test reordering
Element Heading
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
function setupTables() {
/* $('#myTable').dataTable({
"sScrollY":"10px",
"sScrollX":"10px",
"bScrollCollapse":false,
"bRetrieve":false,
"bProcessing":false,
"bDestroy":true,
"bServerSide":false,
"bPaginate":false,
"bLengthChange":true,
"bFilter":false,
"bSort":true,
"bInfo":false,
"bAutoWidth":true,
"bJQueryUI":true,
"aoColumns":[
null,
null,
null,
null,
null,
null,
null,
null ]
});*/
$('#myTable').dataTable({
"sScrollY":"200px",
"sScrollX":"1050px",
"bScrollCollapse":false,
"bRetrieve":false,
"bProcessing":false,
"bDestroy":true,
"bServerSide":false,
"bPaginate":false,
"bLengthChange":true,
"bFilter":false,
"bSort":true,
"bInfo":false,
"bAutoWidth":true,
"bJQueryUI":true
}).rowReordering();
}
[/code]
Our datatable contains a scroll bar.
A problem arises in IE8, whereby the scrollbar does not move when you attempt to drag a row from the bottom to the top. This works fine in Chrome and Firefox, and does not produce any JS console error in IE. I am at a bit of a loss on how to troubleshoot this, so would appreciate any advice on how to get started?
The following is my datatable setup:
[code]
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
Test reordering
Element Heading
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
function setupTables() {
/* $('#myTable').dataTable({
"sScrollY":"10px",
"sScrollX":"10px",
"bScrollCollapse":false,
"bRetrieve":false,
"bProcessing":false,
"bDestroy":true,
"bServerSide":false,
"bPaginate":false,
"bLengthChange":true,
"bFilter":false,
"bSort":true,
"bInfo":false,
"bAutoWidth":true,
"bJQueryUI":true,
"aoColumns":[
null,
null,
null,
null,
null,
null,
null,
null ]
});*/
$('#myTable').dataTable({
"sScrollY":"200px",
"sScrollX":"1050px",
"bScrollCollapse":false,
"bRetrieve":false,
"bProcessing":false,
"bDestroy":true,
"bServerSide":false,
"bPaginate":false,
"bLengthChange":true,
"bFilter":false,
"bSort":true,
"bInfo":false,
"bAutoWidth":true,
"bJQueryUI":true
}).rowReordering();
}
[/code]
This discussion has been closed.