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

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))
});

Answer 2

I believe having too big dialogs is against your 'decent usability experience' requirement. Even if you didn't have to have a workaround due to the jQuery UI Dialog bug, I'd get rid of such big dialogs. Anyway, I do understand there may be some 'extreme' cases in which you need to adapt, so...

That said, it would certainly help if you attached some screenshot - you're asking a question about a design, but we can't see it. But I understand you might not be able/willing to show the contents of it so that's fine. These are my blind guesses; hope you find them useful:

• Try a different layout for your dialog. If you do this, do it for all dialogs, not just the ones you're having problem with (users don't like to learn many different UIs).
• If you can't find a different layout, try widening your dialog first. IF you have many options to choose from, you might find a good solution by dividing them in two columns.
• Knowing you're already using jQuery UI, try using tabs. If you have too many options, a tabbed panel is usually a good solution - users are 'used' to that widget.
• You talked about 'items' in the dialog, but we don't know what an item is. Is it possible at all to show them in a 'summarized' way such as a small list at the left and an expanded view at the right when you click on them? For example, having a list with the items titles at the left, and when you click them you get the full display on the right.

Without being able to see the design, I guess that's as far as I can go.

Answer 3

Did you try my extension to the Dialog? http://plugins.jquery.com/project/jquery-framedialog