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!

Ambrose

The scrolling is disabled because the dialog is modal. You could set modal:false to allow scrolling again. But do you want a modal dialog? – Rampageous

@andyb, if the dialog itself is taller than the window, then the lack of scrolling of the main window can constrain. Another possibility would be to force scrollbars on the dialog itself but in some situations, scrolling the window as a whole would be a better experience. – Poynter

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.

Juice

Fascinating; thanks so much for sharing this. I was experiencing this problem in Chrome only and this unlocked the scroll bar without any negative consequences I have noticed yet. – Poynter

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.

Poynter

FYI, although this is an old answer, it's still the best on IMO. But, as of now (2017/18) the maxHeight parameter is working fine now to achieve this on the .dialog object. – Alarick

Using the maxHeight parameter worked for me where this answer did not.. even though it should.... – Gabble