Auto-sizing jQuery-UI Dialog

I recently upgraded all my jquery and jquery-ui (and some supporting) libs. Part of this upgrade was also to get the latest version of nyroModal working.

After several hours of chasing issues with the lib I decided to rip it out of my app and rather use the jquery-ui dialog plugin that ships with the native lib.

A large bugbear with nyroModal has always been that I could never get the dialogs to flow around the different content lengths that I was populating them with properly. After retrofitting the jquery-ui dialog plugin I ran into the similar issues I had with nyroModal.

Whenever the content of my dialog was greater than the distance from the top of the dialog window to the bottom of the viewport, the dialog would simply disappear off the viewport (regardless of whether it had a scrollbar or not).

What I wanted was for the dialog to automagically adjust its vertical height based on the size of the content it contains relative to the top of the dialog position and the bottom of the viewport.

The fact that I am using FBBorderLayout (yep, I am aware this project has been superseded by the jQuery UI plugin but I am taking baby steps here) to set up a nice layout that stops the page from scrolling down and contributes to the dialog sizing off the viewport.

The scene
Based on the documentation on the jquery-ui dialog plugin page I created something like this.

As you can see from this page the dialog stretched off the screen with no scrollbar or way to scroll down to see the content of the dialog.

Styling
Ok, not quite what we wanted so I added the following style code to the head to try and get the dialog container to automatically flow and add a scrollbar if the content was too big.

And? It had no effect whatsoever. I tried all possible styling that I could find to try and get the dialog container to play nice but to no avail.

Unlikely rescuer
I scoured the web for a possible solution. All I found were a lot of questions about this phenomenon but no real usable solutions or suggestions (beyond the styling I'd already tried).

I then thought of trying to calculate the height programatically and set the height of the dialog contents prior to displaying it.

You'll notice I stopped the dialog from displaying automatically by adding the 'autoOpen: false' option to the dialog initialization. This is required so that I am able to calculate the height before displaying the dialog.

Finally
Here's the complete source file for posterity.

Enjoy!