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