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.
Best Answer
Update: As of jQuery UI 1.8, the working solution (as mentioned in the second comment) is to use:
Use the autoResize:true option. I'll illustrate:
Here's a working example: http://jsbin.com/ubowa