Jquery modal dialogs DISABLE the scrollbars

Question

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

• epignosisx: Why don't you try adding a scrollbar inside the dialog?
• Nicolas Thery: Because this doesn't make sens in my application ... Sorry
• daniloquio: possible duplicate of Scrollbar problem with jQuery UI dialog in Chrome and Safari

Answer 1

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

• Nicolas Thery: Hello, Thank you for you answer but unfortunately this doesn't look to work. I added this CSS part in my sample and it's still not working : jsbin.com/ozapol/5
• Nicolas Thery: Actually it does work on Internet explorer but it doesn't on Chrome... Any Idea ?
• jk.: @NicolasThery Works for me in Chrome on the Mac and PC. Not sure why it isn't working for you.
• Nicolas Thery: It's not working either on version 16.0.912.75 for Windows nor the version 16.0.912.77 that I just installed.
• jk.: @NicolasThery Yes, but it only works with the scrollwheel. Try this: jsbin.com/ujagov/edit#javascript,html

Answer 2

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

Answer 3

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

• Nicolas Thery: I'm sorry but I dont want the scroll bar inside the dialog but for the whole page. I dont want many scroll bars in my interface. I updated the example :jsbin.com/ozapol/9

Answer 4

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