how to center jqGrid popup modal window?
Code below can used to center window. Oleg sample code is used for that.
If form height changes, it does not center. Testcase to reproduce form not centered issue.
Steps to reproduce:
- Open page below in IE9
- Open view for first row
- click in view window next row button to open second row.
Observerd:
view window is not centered, bottom content is not visible and not accessible.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.extend(jQuery.jgrid.view, {
recreateForm: true,
closeOnEscape: true,
width: 0.96*screen.width,
beforeShowForm: function ($form) {
$form.css({"max-height": 0.72*screen.height+"px"});
$form.find("td.DataTD").each(function () {
var $this = $(this), html = $this.html(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(this).html(html.substr(6));
}
$this.children("span").css({
overflow: "auto",
"text-align": "inherit", // overwrite 'text-align: "right"'
display: "inline-block"/*,
"max-height": "100px"*/
});
});
// "editmodlist"
var dlgDiv = $("#viewmod" + $('#list')[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
//var dlgWidth = dlgDiv.width();
//var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
// dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}
});
var mydata = [
{id:"1",invdate:"2007-10-02",name:"row1",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"2",invdate:"2007-10-02",name:"clicking\n me\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nincreases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: "local",
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
{name:'name',index:'name', style:'width:"20px"', editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: { wrap : "on",
style : "width:30px"
}
},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
{name:'note',index:'note', width:150, sortable:false}
],
pager:'#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Custom Navigation to Top Toolbar"
});
grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true});
});
</script>
</head>
<body style="overflow:hidden">
<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>
</body>
</html>
It seems to me, that the easiest way to do this is to change the dialog position inside of the beforeShowForm event:
var grid = $("#list");
grid.jqGrid('navGrid','#pager',
{add:false,del:false,search:false,refresh:false},
{ beforeShowForm: function(form) {
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}
});
You can see live the example here.
For some reason Oleg's code, as listed, wasn't completely working for me (though I wouldn't have ever gotten this far without it).
Two issues:
1.) If you just paste in what's in that answer, you'll move your edit modal, but not your add modal. I only have an add modal, so that was confusing for a while. You basically just double the code (see below).
2.) The code Oleg's written was adding the averaged top and left relative to the entire page rather than the parent div. I'm sure I'm missing something obvious (or perhaps that's what the TODO is about?), but this worked for me...
Note: I edited to factor the function out to reuse in add and edit modals and haven't actually tested the changes. If this doesn't work, see the previous revision.
var grid = $("#list");
function centerDialog(form) {
//alert('adding' + "#editmod" + grdNames[0].id);
var dlgDiv = $("#editmod" + grdNames[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// Grabbed jQuery for grabbing offsets from here:
//https://stackoverflow.com/questions/3170902/select-text-and-then-calculate-its-distance-from-top-with-javascript
var parentTop = parentDiv.offset().top;
var parentLeft = parentDiv.offset().left;
// HINT: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round(
parentTop + (parentHeight-dlgHeight)/2
) + "px";
dlgDiv[0].style.left = Math.round(
parentLeft + (parentWidth-dlgWidth )/2
) + "px";
}
// Now it's easy to reuse that function to center stuff.
grid.jqGrid(
'navGrid','#pager',
{add:false,del:false,search:false,refresh:false},
{ beforeShowForm: centerDialog }, // edit modal
{ beforeShowForm: centerDialog } // add modal
);