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.

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.

• javascript
• jquery

Share Improve this question Follow edited Nov 12, 2010 at 0:09 Curtor asked Nov 11, 2010 at 23:04 CurtorCurtor 73722 gold badges99 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

According to the docs there is a resizeStop hook after resizing is plete. 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");
 });