jqGrid - Add/Edit dialog not aligned to centre of the screen

Question

I'm using free-jqgrid 4.9.2

When clicking the Add/Edit dialog in toolbar/toppager, then dialog appears in one corner of the screen not in centre of the screen/page.

I tried the below code.. Any help or suggestions please?

//Toolbar button to add a config
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
  caption: jQuery.i18n.prop('userdetail.table.button.adduser'),
  title: jQuery.i18n.prop('userdetail.table.title.add'),
  buttonicon: 'fa-user-plus',
  onClickButton: function() {
    jQuery("#userGrid").jqGrid('editGridRow', "new", {
      //Add options
      height: 'auto',
      width: 'auto',
      top: 75,
      left: 350,
      modal: true,
      addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
      processData: jQuery.i18n.prop('application.common.message.processing'),
      recreateForm: true,
      reloadAfterSubmit: false,
      closeOnEscape: true,
      //checkOnUpdate:true,//Form Navigation option
      //savekey: [true,13], //Form Navigation option
      //navkeys: [true,38,40],//Form Navigation option
      //checkOnSubmit : true,//Form Navigation option
      bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
      bSubmit: jQuery.i18n.prop('application.common.button.save'),
      afterSubmit: refreshData, // Need to refresh the data in the table to reflect the primary key added to this table.
      closeAfterAdd: true,
      beforeShowForm: function() {
        // "editmodlist"
        var dlgDiv = $("#editmod" + grid[0].id);
        var parentDiv = dlgDiv.parent();
        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";
      }

    });
  }
});

Answer 1

You use top: 75, left: 350 options of and beforeShowForm which changes position of the dialog before it will be displayed. Instead of that I would suggest you to follow more simple way and to use jQuery UI position inside of afterShowForm. the corresponding callback can be like the following

afterShowForm: function($form) {
    setTimeout(function () {
        $form.closest(".ui-jqdialog").closest(".ui-jqdialog").position({
            my: 'center',
            at: 'center',
            of: window
        });
    }, 50);
}