In IE 7 and 8, whenever I want edit or add a row to the grid and the form shows up. The form and the grey background are shown ON TOP of the grid and not over it. I am not able to uplaod a pic but here is a diagram:
Grey area
[ jqGrid Form]
Not grey and accesible if I scroll down
My grid
If needed I can post my html/css/jq code. In firefox the functionality is fine, as in the grey area is OVER the grid and the grid is not accesible.
Is this is an IE bug?
I am using jquery 1.7.1, jqGrid 4.3.1 and jQuery ui 1.8.17.
<?php
session_start();
$user = $_SESSION['username'];
$uID = $_SESSION['UserID'];
$perms = $_SESSION['Access'];?><html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.17.custom.js" type="text/javascript"></script>
<script src="jquery.ui.datepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.theme.css" />
<script>
$(document).ready(function () {
var lastsel3;
var uID = <?php echo $uID; ?>;
$grid = $("#tasks"),
initDateEdit = function (elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showButtonPanel: true
});
}, 100);
},
initDateSearch = function (elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showButtonPanel: true
});
}, 100);
},
editSettings = {
//recreateForm:true,
jqModal:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
closeAfterEdit:true
};
$grid.jqGrid({
datatype: "local",
url: 'register.php',
sortname: 'Job ID',
sortOrder: 'asc',
postData: {uID:uID},
colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
colModel: [
{name: "track", index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
{name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
{name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
{name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
{name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
{name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
],
onSelectRow: function(track){
if(track && track!==lastsel3)
{
$('#tasks').jqGrid('restoreRow',lastsel3);
$("#tasks").jqGrid('editGridRow',track,editSettings);
lastsel3=track;
}
else{
$("#tasks").jqGrid('editGridRow',track,editSettings);
}
},
editurl: 'editRow.php',
rowNum: 10,
shrinkToFit: true,
rowList: [10,20,50],
viewRecords: true,
xmlReader: {
root: "tasks",
row: "task",
repeatitems: false
},
pager: $('#navTasks'),
onInitializeForm : function () {
},
caption: "Your Tasks"
}).navGrid('#navTasks',{<?php
if ($user==NULL){
echo 'edit:false,add:false,del:false';
}
else{
echo 'edit:false,add:false,del:false';
}
?>},{},{},{},{multipleSearch: false, multipleGroup: false});
$('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
setInterval(
function(){
$('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
},100000);
$(window).bind('resize', function() {
$("#tasks").setGridWidth($(window).width()-"142");
$("#tasks").setGridHeight($(window).height()-"215");
}).trigger('resize');
});
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr >
<td colspan="100%">
<DIV id="header" class="header">
<div class="title" align="center">Welcome to Research Division - Work Flow System<br /><span>Your Tasks</span></div>
<?php
if($user == NULL){
echo '<div align="center"><br/> Please Sign-in <a href="http://127.0.0.1">here</a></div>';
}
else {
echo '<div align="center">Welcome '.$user.'!</div>';
}
?>
</DIV>
</td>
</tr>
<tr >
<td class="height">
<div class="sidebar">
<p><a href="assign.php">Assign Tasks</a></p>
<p><a href="completed.php">Completed Tasks</a></p>
<p><a id="logout" href="logout.php">Sign Out</a></p>
</div>
</td>
<td>
<DIV class="tables" align="center" >
<table id="tasks"></table>
<div id="navTasks"></div>
</DIV>
</td>
</tr>
</table>
</body>
and the CSS:
tr,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent; }.tables{
min-width: 400px;}.header{
height: 100px;
width: 100%;
min-width: 500px;
background-color: #3E97D1;
border: solid 1px #681A38;
border-left: none;}.title{
font-size: 25px;}table{
border-collapse: collapse;
border: none;
padding: 0;
margin: 0px;
border-spacing: 0px;
width: 99%;
outline: 0;
height: 100%;}.height {
height: 99%;}.sidebar{
background-color: #009B95;
padding: 2px;
text-align: left;
border-right: solid 1px #681A38;
border-bottom: solid 1px #681A38;
width: 120px;
height: 99%;}
I suppose that the reason of the problem which you describe is that you don’t use and
<!DOCTYPE html ...before<html>. Without the line web browser work in quirks mode. You should use the doctype which corresponds to the dialect of HTML/XHTML which you use. Because one find<br />in your code I suppose that you should includebefore
<html>. Look at the example from the jqGrid documentation.