Jquery modal dialogs DISABLE the scrollbars

Question

As you can see on this link, http://jsbin.com/ozapol/9 ,

Jquery disables the scrollbars on some versions of IE and the latest version of chrome. (I didnt try any other yet...)

Is there a way to keep scrollbars enabled to be able to scroll through a long long dialog ?

Thank you ! Bye

Nice solution for Internet Explorer (Thanks to jk.)

html {overflow-y : scroll}

Brutal workaround for Chrome (Thanks to jk.)

On Chrome, JqueryUI Hijacks mouse events on the scrollbars. This looks like a bug that is referred in the links above. In order to remove those bindings, you have to unbind events each time you create a modal dialog :

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

There is the final example : http://jsbin.com/ujagov/2

Links to bug reports :

1. http://bugs.jqueryui.com/ticket/4671
2. http://wiki.jqueryui.com/w/page/34725121/Visual-Test-Page-Cleanup

Answer 1

This bug fixed at jQueryUi-1.10. Here is link with the issue http://bugs.jqueryui.com/ticket/4671.

Answer 2

You can keep scrollbars enabled with:

html {overflow-y: scroll;}

You could add that CSS programmatically so it doesn't affect every page of the site and possibly the design.

And, you may have to unbind the mouse events that the modal dialog hijacks:

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

See Scrollbar problem with jQuery UI dialog in Chrome and Safari

Answer 3

If you don't want to or can't upgrade to jQuery UI 1.10, this is the solution for you:

https://stackoverflow.com/a/7740756/354756

Answer 4

Add following code to your css-file:

 .ui-dialog .ui-dialog-content {
    overflow-y: scroll;

 }
 #longdialog{
    height: 450px;

 }

The overflow doesn't work because the height was set to auto, define a specific height to the container div