Search code examples
jqueryjquery-uiposition

jquery UI positioning not working right

For the first dialog using

position: {
  my: "center middle",
  at: "center middle",
  of: window
},

works correctly and centered in the middle of the screen. Then I have a confirmation dialog that appears on top of that using the same code and it seems to have the top left corner align with the middle, as if the my part isn't working right. Is there something special that has to be done when more than one dialog is displayed?

Screenshot enter image description here

excerpt of code SetupDialog function sets up the first dialog that is correctly centered the openConfirmation function sets up the one that isn't working right

setupDialog: function() {
    var self = this;
    this.$div.dialog({
      modal: true,
      width: "auto",
      autoResize: true,
      resizable: true,
      autoOpen: false,
      position: {
        my: "center middle",
        at: "center middle",
        of: window
      },
      title: "Submit Group",
      buttons: {
        Submit: function() {
          var checked = $("input[type=radio][name=calcSelectionRadio]:checked");

          if (self.invalidInput(checked)) {
            ShowError("You cannot select this row because it contains invalid values");
          }

          switch (checked.val()) {
            case "manual":

              var row = [];
              $(checked).parents("tr").children("input").each(function(index, input) {
                row.push($(input).val());
              });

              self.openConfirmation(row);
              break;
            case "lastYear":

              self.openConfirmation(self.lastYearArray);
              break;
            case "calculated":
              self.openConfirmation(self.calculatedArray);
              break;
            default:
              ShowError("You must select a row of values to submit");
          }

        },
        Cancel: function() {
          $(this).dialog("close");
        }
      },
      open: function() {},
      close: function() {}
    });
  },
  openConfirmation: function(classArray) {
    var self = this;
    var dialogDiv = $("<div id='submitConfirm'></div>").dialog({
      modal: true,
      title: "Confirmation",
      width: "auto",
      position: {
        my: "center middle",
        at: "center middle",
        of: window
      },
      open: function() {
        $(this).html(
          "This operation will replace all class AADT values <br>for the group named : '" + self.groupName + "' and mark the group as completed<br><br>"
        );
      },
      close: function() {
        $(this).dialog("destroy").remove();
      },
      buttons: {
        OK: function() {
          Utils.disableDialogInputs(dialogDiv, true);
          WebMethod.UpdateAadts(self.groupId, window.currentYear, classArray, function(err, response) {
            Utils.disableDialogInputs(dialogDiv, false);

            if (err) throw err;

            $(this).dialog("close");
            self.$div.dialog("close");
          });
        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  },
Solution

  • First, middle is not an acceptable vertical value.

    Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom".

    Ref: https://api.jqueryui.com/position/

    Now, by default, the values are:

    position: { my: "center", at: "center", of: window }

    See More: https://api.jqueryui.com/dialog/#option-position

    So the default positioning should work. For your second dialog, you can use the div element of the first dialog and center on that:

    position: {
  my: "center",
  at: "center",
  of: "#setupDialog"
}

    As you have not provided the HTML or any way of testing with a working example, I cannot see if anything else might be affecting the positioning or test this solution.