Scrollbar issue with jQuery UI dialog in Chrome and Safari

Question

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

This is a problem if the dialogue is too high to fit on one page - users on the laptop are upset.

Someone picked up these three months ago on the jQuery error tracker - http://dev.jqueryui.com/ticket/4671 - this does not seem to be committing, it is a priority. :)

So somebody:

• Do you have a fix for this?
• proposed a workaround that would provide a decent use experience?

I am experimenting with mouseover / scrollto on form bits, but this is not a great solution :(

EDIT: props in Rowan Beentje (which is not on SO afaict) to find a solution to this. The jQuery user interface prevents scrolling by capturing mouseup / mousedown events. Thus, the code below fixes this:

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

Use at your own risk, I do not know what other unfashionable behavior can cancel this material.

Answer 1

I agree with the previous posters that if dialogue does not work for you, it may be good to review your design. However, I can offer an offer.

Could you put the contents of the dialog inside a scrollable div? Thus, instead of the entire page needed to scroll, you just need to scroll the contents inside the div. This workaround should be fairly easy to implement.

Answer 2

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

He solved the problem for me. Hope this is the solution you are looking for.

Answer 3

While I agree that people on the side do not make a dialogue that is larger than the viewport, I think there are times when scrolling may be required. The dialog may look very good at resolutions in excess of 1024 x 768, but less and less looks like a crunch. Or say, for example, you never want a dialog to appear above the title of your site. In my case, I have ads that sometimes have problems with z-index, so I never want to show dialogs above them. Finally, in the general case, it is bad to remove any general control, such as scrolling, from the user at all. This is a problem apart from how big the dialogue is.

I would be interested to know why these events in the muldowns and mice in the first place.

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

Answer 4

I circumvent this situation by disabling interactive modal mode and showing the 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

I believe that too large dialogs contradict your requirement of "good usability". Even if you did not have a workaround due to a jQuery UI Dialog error, I would get rid of such large dialogs. In any case, I understand that there may be some “extreme” cases in which you need to adapt, so ...

However, this will certainly help if you attach a screenshot - you ask a question about the design, but we can not see it. But I understand that you may not be able / not willing to show its contents in a way that is good. These are my blind guesses; hope you find them useful:

• Try a different layout for your dialogue. If you do this, do it for all dialogs, not just for those with which you have a problem (users do not like to learn many different user interfaces).
• If you cannot find another layout, try expanding the dialog first . If you have many options to choose from, you can find a good solution by dividing them into two columns.
• Knowing that you are already using the jQuery user interface, try using tabs . If you have too many options, a tabbed panel is usually a good solution - users are "used" for this widget.
• You talked about the "elements" in the dialog box, but we do not know what the element is. Is it possible to show them in a “generalized” way, for example, a small list on the left and an extended view on the right when you click on them? For example, having a list with item headers on the left, and when you click on them, you get a full screen on the right.

Unable to see the design, I think as far as I can go.

Answer 6

There is a workaround that unbinds the bound event. This adds the following to the open: dialog event:

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

It works ... but it is ugly

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

In my case, it worked like a charm.

Answer 7

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

Answer 8

Have you tried expanding to dialogue? http://plugins.jquery.com/project/jquery-framedialog

Answer 9

Use the code below. It will work fine.

 $("dialogId").dialog({ open: function(event, ui) { window.setTimeout(function() { jQuery(document).unbind('mousedown.dialog-overlay') .unbind('mouseup.dialog-overlay'); }, 100); }, modal: true, safariBrowser: (function( $, undefined ) { if ($.ui && $.ui.dialog) { $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' '); } }(jQuery)) });