Редактор форм jqGrid отображается в центре экрана сверху

Question

В моем jqGrid все отлично работает, кроме редактора форм. Почему редактор форм отображается в верхней средней части экрана?

Ниже мой код.

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

Также включены следующие файлы:

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

Таблица объявлена ​​как:

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

Answer 1

Это была моя ошибка.Я не включил jqModal.css.Мне пришлось изменить одно свойство в нем, то есть position : absolute.

Теперь оно работает ...