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

Question

In my JQGrid everything works fine except for the form editor.. Do now know why but the form editor displays 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 :

<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>

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>

plz help..

Answer 1

My mistake. Had not included jqModal.css.. Had to change one property in it i.e position : absolute

It is working now..