jqGrid form editor displays in the middle of the screen on top

In my jqGrid everything works fine except for the form editor.. Why does the form editor display in top-middle of the screen?

Below is my code.

 $(document).ready(function () {
    var briefallocationid = $("#BriefAllocationId").val();
    var updateDialog = {
        url: '<%= Url.Action("UpdateRegionAndCity", "BriefAllocation") %>'
            , closeAfterAdd: true
            , closeAfterEdit: true
            , modal: false,
            top:0,
        onclickSubmit: function (params) {
            var ajaxData = {};
            var list = $("#RegionAndCity");
            var selectedRow = list.getGridParam("selrow");
            rowData = list.getRowData(selectedRow);
            ajaxData = { BriefAllocationId: briefallocationid };

            return ajaxData;
        }
    };
    $.jgrid.nav.addtext = "Add";
    $.jgrid.nav.edittext = "Edit";
    $.jgrid.nav.deltext = "Delete";
    $.jgrid.edit.addCaption = "Add City";
    $.jgrid.edit.editCaption = "Edit City";
    $.jgrid.del.caption = "Delete City";
    $.jgrid.del.msg = "Delete selected City?";

    $("#RegionAndCity").jqGrid({
        url: '/BriefAllocation/GetRegionAndCities/?briefId=' + briefallocationid,
        datatype: 'json',
        mtype: 'GET',
        prmNames: {
            briefId: briefallocationid
        },
        colNames: ['AllocatedRegionAndCitiesId', 'BriefAllocationId', 'LocationId', 'PlannerId', 'Region', 'Budget'],
        colModel: [
                              { name: 'AllocatedRegionAndCitiesId', index: 'AllocatedRegionAndCitiesId', width: 100, align: 'left', /* key: true,*/editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                              { name: 'BriefAllocationId', index: 'BriefAllocationId', width: 150, align: 'left', editable: false, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                              { name: 'LocationId', index: 'LocationId', width: 300, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                              { name: 'PlannerId', index: 'PlannerId', width: 150, align: 'left', editable: true, edittype: 'text', editrules: { required: false} },
                              { name: 'Region', index: 'Region', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                              { name: 'Budget', index: 'Budget', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                            ],
        pager: $('#listPager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'AllocatedRegionAndCitiesId',
        sortorder开发者_开发问答: "asc",
        viewrecords: true,
        imgpath: '/scripts/themes/steel/images',
        caption: '<b>Regions And Cities</b>',
        ondblClickRow: function (rowid, iRow, iCol, e) {
            $("#RegionAndCity").editGridRow(rowid, prmGridDialog);
        }
    }).navGrid('#listPager', { edit: true, add: true, del: true, refresh: true },
            updateDialog,
            updateDialog,
            updateDialog);
});
     </script>

Also included following files:

<link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/themes/grid.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqDnR.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/grid.locale-en.js" type="text/javascript"></script>

The table is declared as:

<div>
    <table id ="RegionAndCity" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="listPager" class="scroll" style="text-align:center;"></div>
    <div id="listPsetcols" class="scroll" style="text-align:center;"></div>
</div>

---

It was my mistake. I had not included jqModal.css. I had to change one property in it, that is, position : absolute.

It is working now...