Changes between Initial Version and Version 1 of Ticket #7960, comment 2


Ignore:
Timestamp:
Dec 31, 2011, 10:50:46 AM (11 years ago)
Author:
tj.vantoll
Comment:

Legend:

Unmodified
Added
Removed
Modified

  • Ticket #7960, comment 2

    initial v1  
    11I 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.
    22 
     3
    34However, since z-index is a configurable parameter of both dialog and resizable, this type of solution probably isn't going to work.
    4  
     5
     6
    57The 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.
    68 
     9
    710Since 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.
    811 
     12
    913The 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: 
    1014
     15{{{
    1116// increase zIndex of sw, se, ne, nw axis
    1217//TODO : this modifies original option
    1318if(/sw|se|ne|nw/.test(handle)) axis.css({ zIndex: ++o.zIndex });
     19}}}
    1420
    1521I'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