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

Question

Here is code:

<script type="text/javascript">
    $(function(){
        var dialogOptions = {
            title: "Header",
            autoOpen: false,
            modal: true,
            width: 400,
            height: 1000
        };
        $(".wnd").dialog(dialogOptions);
        $("#btn").click(function(){ $(".wnd").dialog("open"); });
    });
</script>

<style>
    .wnd {background:yellow;height:900px;width:300px;}
</style>

<div class="wnd"></div>
<button id="btn">click me</button>

When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).

But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.

Here is demo on jsfiddle.

How to activate that side slider?

Thanks!

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.