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 whee

Answer 1

There is a workaround that unbind the binded event. This adds the following in the open: event of the dialog :

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

This works ... but this is ugly

--from https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

Worked like a charm in my case.

Answer 2

While I agree with, the folks in the party of not making a dialog that is bigger than the viewport, I think there are cases where scrolling may be necessary. A dialog might look very good in a resolution greater the 1024 x 768, but anything less looks crunched. Or say for instance you never want a dialog to show up over the header of your site. In my case I have ads that occassionally have flash z-index problems, so I never want dialogs to show above them. Finally, it is bad in general to take away any sort of common control, like scrolling, away from the user. This is a problem separate from how big the dialog is.

I would be interested in knowing why the those mousedown and mouseup events are there in the first place.

I tried the solution that alexis.kennedy provided and it works break without breaking anything that I can see in any browser.

Answer 3

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.

Answer 4

I workaround this situation by disabling dialog modal mode and showing overlay manually:

function showPopup()
{
    //...

    // actionContainer - is a DIV for dialog

    if ($.browser.safari == true)
    {
        // disable modal mode
        $("#actionContainer").dialog('option', 'modal', false);

        // show overlay div manually
        var tempDiv = $("<div id='tempOverlayDiv'></div>");
        tempDiv.css("background-color", "#000");
        tempDiv.css("opacity", "0.2");
        tempDiv.css("position", "absolute");
        tempDiv.css("left", 0);
        tempDiv.css("top", 0);
        tempDiv.css("width", $(document).width());
        tempDiv.css("height", $(document).height());
        $("body").append(tempDiv);
    }

    // remove overlay div on dialog close
    $("#actionContainer").bind('dialogclose', function(event, ui) {
        $("#tempOverlayDiv").remove();      
    });

    //...
}

Answer 5

This is a bug that has been since fixed: http://bugs.jqueryui.com/ticket/4671

Answer 6

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.