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!

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? — andyb
– andyb, Commented Jan 7, 2012 at 8:21
@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. — veeTrain
– veeTrain, Commented Jun 20, 2013 at 12:22

dciccale · Accepted Answer · 2012-05-02 22:25:42Z

3

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.

edited May 2, 2012 at 22:25

answered Apr 23, 2012 at 17:47

dciccale

4426 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

veeTrain Over a year ago

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.

veeTrain · Accepted Answer · 2013-06-20 16:30:00Z

3

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.

answered Jun 20, 2013 at 16:30

veeTrain

2,9152 gold badges28 silver badges45 bronze badges

2 Comments

Eckstein Over a year ago

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.

little_birdie Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related