CODEWITHSUNDEEP
javascriptjquery-uidialogscrollbar
Nicolas Thery
Nicolas Thery

Reputation: 2448

Jquery modal dialogs DISABLE the scrollbars

As you can see on this link, http://jsbin.com/ozapol/9 ,

Jquery disables the scrollbars on some versions of IE and the latest version of chrome. (I didnt try any other yet...)

Is there a way to keep scrollbars enabled to be able to scroll through a long long dialog ?

Thank you ! Bye

Nice solution for Internet Explorer (Thanks to jk.)

html {overflow-y : scroll}

Brutal workaround for Chrome (Thanks to jk.)

On Chrome, JqueryUI Hijacks mouse events on the scrollbars. This looks like a bug that is referred in the links above. In order to remove those bindings, you have to unbind events each time you create a modal dialog :

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

There is the final example : http://jsbin.com/ujagov/2

Links to bug reports :

  1. http://bugs.jqueryui.com/ticket/4671
  2. http://wiki.jqueryui.com/w/page/34725121/Visual-Test-Page-Cleanup

Upvotes: 7

Views: 12836

Answers (4)

daniloquio
daniloquio

Reputation: 3902

If you don't want to or can't upgrade to jQuery UI 1.10, this is the solution for you:

https://stackoverflow.com/a/7740756/354756

Upvotes: 0

Rostyslav Nikolayenko
Rostyslav Nikolayenko

Reputation: 21

This bug fixed at jQueryUi-1.10. Here is link with the issue http://bugs.jqueryui.com/ticket/4671.

Upvotes: 2

jk.
jk.

Reputation: 14435

You can keep scrollbars enabled with:

html {overflow-y: scroll;}

You could add that CSS programmatically so it doesn't affect every page of the site and possibly the design.

And, you may have to unbind the mouse events that the modal dialog hijacks:

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

See Scrollbar problem with jQuery UI dialog in Chrome and Safari

Upvotes: 5

dimitril
dimitril

Reputation: 393

Add following code to your css-file: 

 .ui-dialog .ui-dialog-content {
    overflow-y: scroll;

 }
 #longdialog{
    height: 450px;

 }

The overflow doesn't work because the height was set to auto, define a specific height to the container div

Upvotes: 0

Related Questions