Ticket #4671 (closed bug: fixed)

Opened 5 years ago

Last modified 9 months ago

Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari

Reported by: tomcastleman Owned by:
Priority: major Milestone: 1.10.0
Component: ui.dialog Version: 1.7.2
Keywords: modal Cc: tom.castleman@…
Blocking: Blocked by:

Description

Hi there,

The modal dialog disables the browser vertical scroll bar in:

Safari: 4 (530.17) Chrome: 2.0.172.33.

Clicking the scroll bar does nothing. For me this is particularly critical because the modal dialog contains a tall form and the user needs to scroll down to reach all the inputs and submit buttons. Therefore in the above browsers it is impossible to submit the form!

I presume this is not by design because this behaviour is not experienced in FF <=3.5, IE 6 / 7 / 8, or Opera (and I'm pretty sure not in previous versions of Chrome and Safari).

I am using 1.7 but the problem still persists in 1.7.2 and can be reproduced on the demo page:

 http://jqueryui.com/demos/dialog/#modal

Thanks,

Tom

Change History

comment:1 follow-up: ↓ 12 Changed 5 years ago by tomcastleman

The scroll wheel on the mouse still allows the page to be scrolled as does the 'page down' key. It is just the browser scroll bar which does nothing when you click it in Chrome and Safari.

Hope this helps.

comment:2 Changed 4 years ago by joern.zaefferer

  • Milestone changed from TBD to 1.8

comment:3 Changed 4 years ago by casey

The 'mousedown.dialog-overlay' bound to $(document) in $.ui.dialog.overlay.create is causing this issue.

comment:5 Changed 4 years ago by casey

Instead of binding the handlers to $(document), they could be bound to the overlay. The overlay covers all element with a lower z-index so just preventing bubbling would do.

comment:6 Changed 3 years ago by jprell

There is a  visual test page for this issue.

comment:7 Changed 3 years ago by k_borchers

I have sent a pull request at  https://github.com/jquery/jquery-ui/pull/209.

Thanks

comment:8 follow-ups: ↓ 9 ↓ 10 Changed 3 years ago by k_borchers

OK, let's try that again with  https://github.com/jquery/jquery-ui/pull/230.

Thanks

comment:9 in reply to: ↑ 8 Changed 3 years ago by maets

Replying to k_borchers:

OK, let's try that again with  https://github.com/jquery/jquery-ui/pull/230.

Thanks

Got this error on Chrome (12.0.742.100), but only on Windows XP. The link above solved the issue. Thanks :)

comment:10 in reply to: ↑ 8 ; follow-up: ↓ 17 Changed 3 years ago by homelands

Replying to k_borchers:

OK, let's try that again with  https://github.com/jquery/jquery-ui/pull/230.

Thanks

When opening a dialog with this patch, it gives javascript error "this.bind is not a function" (on Firefox 4.0) Not always reproducible. Any chance as a timing issue there?

comment:11 Changed 3 years ago by ours

I get this bug in Chrome 12.0.742.100 on Windows 7 x64. I applied the suggested changes and I get a JS error saying the bind method doesn't exists but it does unlock the scrollbar.

comment:12 in reply to: ↑ 1 Changed 3 years ago by Krisp PL

I got this problem only on Chrome Win7 x64 (12.0.742.91) after using .load() (jQ v1.8.13). Chrome for Mac works fine like Safari does, what's suggesting not jQ bug, I think. I don't use modal dialog and my case is:

a) Initially document has few divs which first two filled with content are displayed but the rest are empty and hidden (css display:none), so document is two views long.

b) Using appear plugin (recursively) next not displayed div is feeded with content through .load() and faded in.

When document is growing, scrollbar is shrinking properly but scrolls only to the end first two divs and stucks. If I scroll further with scrollmouse (or page down or even clicking on scrollbar rail), scrollbar is following but I cannot drag it.

Last edited 3 years ago by Krisp PL (previous) (diff)

comment:13 Changed 3 years ago by gusaroni

I'm seeing this on Chrome version 12.0.742.1222 - Windows 7 x64.

A dialog is opened that is larger than the available viewport, and scrolling (via the mouse) is disabled. I am able to scroll horizontally, and vertically with the arrow keys.

comment:14 Changed 3 years ago by kristopolous

I have a bug filed against me regarding this at the company I work at. I'd be willing to go in and fix it thus closing both bugs. What is the best way to go about doing this?

comment:15 follow-up: ↓ 16 Changed 3 years ago by scott.gonzalez

Fork the repo and send a pull request. There are more details at  http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide

Feel free to ask questions on that page, this ticket, IRC (#jqueryui-dev on freenode) or the  forums.

comment:16 in reply to: ↑ 15 Changed 3 years ago by kristopolous

Replying to scott.gonzalez:

Fork the repo and send a pull request. There are more details at  http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide

Feel free to ask questions on that page, this ticket, IRC (#jqueryui-dev on freenode) or the  forums.

Thanks. I was just about to do that in fact ... :)

comment:17 in reply to: ↑ 10 Changed 3 years ago by maets

Replying to homelands:

Replying to k_borchers:

OK, let's try that again with  https://github.com/jquery/jquery-ui/pull/230.

Thanks

When opening a dialog with this patch, it gives javascript error "this.bind is not a function" (on Firefox 4.0) Not always reproducible. Any chance as a timing issue there?

Got this as well I noticed. Got rid of it (temporarily?) by adding the following check:

if (typeof this.bind == 'function') { 
  this.bind( $.ui.dialog.overlay.events, function( event ) {
    ...
  }
}

comment:18 Changed 3 years ago by scott.gonzalez

  • Keywords dialog scroll disable chrome safari removed

comment:19 Changed 2 years ago by PhoenixFnX

I found a solution for Internet Explorer adding the following CSS to <html> :

html {overflow-y: scroll;}

I want it to work on Chrome ! Hope to see a solution soon. Bye

Last edited 2 years ago by PhoenixFnX (previous) (diff)

comment:20 Changed 19 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:21 Changed 19 months ago by dcarrith

  • Summary changed from Modal Dialog disables vertical scroll bar in Chrome & Safari to Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari

comment:22 Changed 19 months ago by petersendidit

  • Status changed from new to closed
  • Resolution set to worksforme

I am unable to recreate this bug in Chrome 20 and 21 and in Safari 5. If this is still an issue let us know which supported version of the browser it is still broken in.

comment:23 Changed 19 months ago by Nodens

Still present in Chrome Version 22.0.1229.94 with Ubuntu 12.04

comment:24 Changed 18 months ago by scott.gonzalez

  • Status changed from closed to reopened
  • Resolution worksforme deleted

comment:25 Changed 18 months ago by scott.gonzalez

  • Status changed from reopened to open

comment:26 Changed 18 months ago by Nate Eagle

  • Status changed from open to closed
  • Resolution set to fixed

Dialog: Awesome new stacking and overlay implementation. Fixes the following tickets:

Fixes #3534 - Dialog: Modal dialog disables all input elements on page. Fixes #4671 - Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari. Fixes #4995 - Dialog: Modal Dialog's overlay dissapears in IE when content is tall. Fixes #5388 - Dialog: Don't change z-index when already at the top. Fixes #5466 - Dialog: "modal" Dialog Incorrectly Cancels Input Events. Fixes #5762 - Dialog: Get rid of z-index workaround, document it instead. Fixes #6267 - Dialog: checkboxes that inherit a z-index < jqueryui.dialog z-index don't work. Fixes #7051 - Dialog: modal prevents tab key from moving focus off slider handle. Fixes #7107 - Dialog: Modal dialog event loss with high zindex child elements (FF 3.6). Fixes #7120 - Dialog: Modal operation interrupts drag drop marker functionality on gmaps. Fixes #8172 - Dialog: Change event cancelled when opening modal dialog from another modal dialog. Fixes #8583 - Dialog: Mouse event wrongly stopped. Fixes #8722 - Dialog: Remove stack option. Fixes #8729 - Dialog: Remove zIndex option.

Changeset: 3829a37ca122e923c3a08b964c4b1a946a2a1456

comment:27 Changed 18 months ago by symve

This issue still exists. When using Chrome (Version 23.0.1271.64 on Mac OS 10.6.8), go to  http://jqueryui.com/dialog/#modal (currently, that page uses jQuery UI - v1.9.1 - 2012-10-25). Then make the width of the browser window smaller until you get a scrollbar in the demo area.

Now click the scrollbar and drag it to the other side. It won't work. Now click on the up/down/left/right icons near the scrollbar. It won't work.

Using keyboard navigation (arrow keys) or the scroll wheel on the mouse both do work.

Last edited 18 months ago by symve (previous) (diff)

comment:28 Changed 18 months ago by tj.vantoll

@symve The issue has been fixed (see  http://jsfiddle.net/tj_vantoll/JQWf4/) but the dialog changes aren't landing until 1.10.

comment:29 Changed 9 months ago by liudongmin

if you don't want to update to 1.10, you can just add if (typeof this.bind == 'function') before $(document).bind($.ui.dialog.overlay.events, function (event) in Create: setTimeout.

Note: See TracTickets for help on using tickets.