Scrollbar problem with jquery ui dialog in Chrome and Safari

Posted by alexis.kennedy on Stack Overflow See other posts from Stack Overflow or by alexis.kennedy
Published on 2009-10-24T10:44:03Z Indexed on 2010/05/15 21:24 UTC
Read the original article Hit count: 975

Filed under:
|
|
|

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

(i) have a fix for this? (ii) 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. jQueryUI prevents scrolling by capturing the mouseup / mousedown events. So this:

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

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui