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 to a scenario where the main page has a scrollbar and the JQuery UI dialog has a scrollbar. This two-scrollbar scenario is unsightly and confusing for the user.

How can I make the JQuery UI dialog grow (and possibly shrink) to always fit its contents without showing a scrollbar? I would prefer that only a scrollbar on the main page is visible.

Answer 1

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 2

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.