Scrollbar problem with jQuery UI dialog in Chrome and Safari

Question

I'm using the jQuery UI dialog with modal=true. In Chrome and Safari, this disables scrolling via the scroll bar and cursor keys (scrolling with the mouse wheel and page up/down still works).

This is a problem if the dialog is too tall to fit on one page - users on a laptop get frustrated.

Someone raised this three months ago on the jQuery bug tracker - http://dev.jqueryui.com/ticket/4671 - it doesn't look like fixing it is a priority. :)

So does anyone:

1. have a fix for this?
2. have a suggested workaround that would give a decent usability experience?

I'm experimenting with mouseover / scrollto on bits of the form, but it's not a great solution :(

EDIT : props to Rowan Beentje (who's not on SO afaict) for finding a solution to this. jQuery UI prevents scrolling by capturing the mouseup / mousedown events. So the code below seems to fix it:

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

Use at own risk, I don't know what other unmodal behaviour unbinding this stuff might allow.

Answer 1

You can use this code : jquery.ui.dialog.patch.js

It solved the problem for me. Hope this is the solution that you're looking for.