Дисплей редактора формы 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.

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