Skip to main content

Search and Top Navigation

#7960 closed bug (fixed)

Opened December 19, 2011 05:12PM UTC

Closed November 26, 2012 11:43AM UTC

Dialog: Modal dialogs do not disable resizables on the page

Reported by: jjoemb Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.16
Keywords: modal Cc:
Blocked by: Blocking:
Description

EXPECT: Resizable DIV on a page with a modal dialog should not be resizable.

ACTUAL: User can resize the resizable when the modal dialog is up.

I believe this is due to the fact that the resize handle z-index is 99999 but the modal dialog overlay is around 1000.

http://jsfiddle.net/mBfHF/

(The button is simply intended to show that other elements are disabled.)

jQuery: 1.7.1

jQuery UI: 1.8.16

(and previous versions that jsfiddle supports)

Browsers: FF latest, Chrome latest, IE 9

Attachments (0)
Change History (14)

Changed December 19, 2011 05:14PM UTC by scottgonzalez comment:1

keywords: → modal
status: newopen

Changed December 31, 2011 03:49PM UTC by tj.vantoll comment:2

_comment0: I can confirm the bug and that the z-index difference is causing this issue.  Simply changing the z-index declaration on line 11 of jquery.ui.resizable.css to "999" instead of "99999" fixes this particular situation. \   \ However, since z-index is a configurable parameter of both dialog and resizable, this type of solution probably isn't going to work. \   \ The only other thing I could think of was to add a marker class to resizable elements when a modal is opened and remove the class when the dialog is closed.  But when you start to think about the fact that the dialog itself can be resizable, and a dialog can technically have resizable elements within it, and that you can have multiple dialogs open at once... this type of solution gets really messy. \   \ Since the zIndex is a configurable option for both of these, personally I think the best way around this is to explicitly pass in the zIndex values that you'd like to use for each individual call. Otherwise this will quickly turn into a zIndex arms race. \   \ The one issue with this is that currently, the value passed into the resizable plugin will only be applied to the corners. The non-corner handles will take the z-index of 99999 from CSS. Lines 106-108 of jquery.ui.resizable.js: \ \ // increase zIndex of sw, se, ne, nw axis \ //TODO : this modifies original option \ if(/sw|se|ne|nw/.test(handle)) axis.css({ zIndex: ++o.zIndex }); \ \ I'm not sure why this is, it seems like you'd want the same zIndex values on all of the sides for consistency and to avoid issues like this one, maybe I'm wrong. I submitted a pull request to change apply the zIndex passed in to all handles - https://github.com/jquery/jquery-ui/pull/5611325346646548368

I can confirm the bug and that the z-index difference is causing this issue.  Simply changing the z-index declaration on line 11 of jquery.ui.resizable.css to "999" instead of "99999" fixes this particular situation.

However, since z-index is a configurable parameter of both dialog and resizable, this type of solution probably isn't going to work.

The only other thing I could think of was to add a marker class to resizable elements when a modal is opened and remove the class when the dialog is closed.  But when you start to think about the fact that the dialog itself can be resizable, and a dialog can technically have resizable elements within it, and that you can have multiple dialogs open at once... this type of solution gets really messy.

Since the zIndex is a configurable option for both of these, personally I think the best way around this is to explicitly pass in the zIndex values that you'd like to use for each individual call. Otherwise this will quickly turn into a zIndex arms race.

The one issue with this is that currently, the value passed into the resizable plugin will only be applied to the corners. The non-corner handles will take the z-index of 99999 from CSS. Lines 106-108 of jquery.ui.resizable.js:

// increase zIndex of sw, se, ne, nw axis
//TODO : this modifies original option
if(/sw|se|ne|nw/.test(handle)) axis.css({ zIndex: ++o.zIndex });

I'm not sure why this is, it seems like you'd want the same zIndex values on all of the sides for consistency and to avoid issues like this one, maybe I'm wrong. I submitted a pull request to change apply the zIndex passed in to all handles - https://github.com/jquery/jquery-ui/pull/561

Changed April 20, 2012 12:55AM UTC by scottgonzalez comment:3

Landed the resizable change in 6150abae49f77a3b2f67c39a3c60a06792b4de8f.

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:4

milestone: 1.9.01.10.0

Changed November 18, 2012 09:18PM UTC by jzaefferer comment:5

tj.vantoll, could you retest this against master? The overlay changes should have fixed this.

Changed November 19, 2012 02:13AM UTC by tj.vantoll comment:6

joern.zaefferer Looks like this is still an issue in master - http://jsfiddle.net/tj_vantoll/TmmQ7/.

.ui-front
has a
z-index
of 100 and the
resizable
handles have a
z-index
of 1000. If I pass in
zIndex: 99
to
resizable
on the above fiddle the
resizable
can no longer be resized.

Changed November 19, 2012 02:13AM UTC by tj.vantoll comment:7

summary: Modal dialog does not disable resizables on the pageDialog: Modal dialogs do not disable resizables on the page

Changed November 19, 2012 02:02PM UTC by scottgonzalez comment:8

Yeah, this is purely a z-index problem. We should fix it by changing resizable handles to something smaller, like 90.

Changed November 19, 2012 11:13PM UTC by jzaefferer comment:9

Do we need a separate resizable ticket for a change like that? Or would we commit that resizable change pointing at this dialog ticket?

Changed November 20, 2012 12:31AM UTC by scottgonzalez comment:10

We can just reference this ticket. It'd be one of the few commits that has a different component listed at the front of the commit and in the ticket reference.

Changed November 21, 2012 02:39AM UTC by tj.vantoll comment:11

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L45.

1000 --> 90?

Can anybody think of any adverse effects of that change? Otherwise I can send a pull request.

Changed November 22, 2012 01:09AM UTC by scottgonzalez comment:12

That should be all that's required. The only adverse effect would be users who have other elements with high z-indexes that overlap resize handles, which seems like it would probably result in bad UX anyway (and it's super easy for the user to fix).

Changed November 24, 2012 09:27PM UTC by tj.vantoll comment:13

Changed November 26, 2012 11:43AM UTC by TJ VanToll comment:14

resolution: → fixed
status: openclosed

Resizable: Modified the default z-index value of resizable handles. Fixed #7960 - Dialog: Modal dialogs do not disable resizables on the page.

Changeset: 0cd470b0d5f8c617e761c4a6c90aeea4e3f54128