Make JQuery UI Dialog automatically grow or shrink to fit its contents

Question

I have a JQuery UI dialog popup that displays a form. By selecting certain options on the form new options will appear in the form causing it to grow taller. This can lead

Answer 1

Height is supported to auto.

Width is not!

To do some sort of auto get the size of the div you are showing and then set the window with.

In the C# code..

TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    {
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }

Answer 2

This works with jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});

Answer 3

The answer is to set the

autoResize:true 

property when creating the dialog. In order for this to work you cannot set any height for the dialog. So if you set a fixed height in pixels for the dialog in its creator method or via any style the autoResize property will not work.

Answer 4

Update: As of jQuery UI 1.8, the working solution (as mentioned in the second comment) is to use:

width: 'auto'

---

Use the autoResize:true option. I'll illustrate:

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

Here's a working example: http://jsbin.com/ubowa

Answer 5

var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

did what i needed it to do for resizing the width of the dialog.

Answer 6

I used the following property which works fine for me:

$('#selector').dialog({
     minHeight: 'auto'
});