jQuery UI dialog: vertical scroll works not correct if dialog height more than window height

Question

Here is code:

Answer 1

A clean solution would be like this one:

http://jsfiddle.net/4fc33/6/

What I'm doing is wraping the jQuery UI overlay create method to turn off the event that prevents scrolling to work correctly.

Answer 2

An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.

At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.

Here's what worked:

$("#dialog").dialog({
    modal: true,
    width: "auto",
    height: "auto"
    /* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);

I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.

* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.