Question

I have a dialog box that displays a dynamic-sized form. I currently get the dialog box to resize automatically with the following code. What I would like it to do is to auto relocate the dialog box after resize event occurs. This is because the dialog box resizes its width, and I would like it to remain centered in the page afterword.

  $("#form-div").dialog({
      autoOpen: false,
      width: "auto",
      height: "auto",
      resize: "auto",
      modal: true
  });

  $("#show-form-button").click(function() {
      $("#form-div").dialog("open");
  });

Edit:

Just to be clear

The dialog box displays a form. After the form is displayed, additional fields may be added to the form, causing it to no longer fit in the original dialog box. The ” resize: ‘auto’ ” option automatically takes care of this and resizes the dialog box. I want the dialog box to be centered after it is auto-resized.

Answer 1

According to the docs there is a resizeStop hook after resizing is complete. So you should be able to do something like this:

$("#form-div").dialog({
      autoOpen: false,
      width: "auto",
      height: "auto",
      resize: "auto",
      modal: true,
      resizeStop: function(event, ui) {
        jQuery(this).dialog('option','position','center');
      }
 });

 $("#show-form-button").click(function() {
     $("#form-div").dialog("open");
 });