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.

Answer 2

I agree with the previous posters in that if the dialog is not working for you, it may be good to rethink your design. However, I can offer a suggestion.

Could you put the dialog content inside a scrollable div? That way instead of the whole page needing to scroll, just the content inside the div would need to scroll. This workaround should be pretty easy to accomplish too.