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

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

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.

This works with jQuery UI v1.10.3

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