Opened 9 years ago
Closed 9 years ago
#9975 closed bug (notabug)
Resizable dialog se handle icon does not stack correctly with other dialogs
Reported by: | kmuncie | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.resizable | Version: | 1.10.4 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Reporting from OSX 10.9.2 - issue present on latest Chrome, FF, and Safari browsers.
When a resizable div or dialog overlays another the ui-icon-gripsmall-diagonal-se sprite does not properly stack with each element.
The handles on these objects are all given a z-index: 90 (which was last considered in #7960)
A reduced test case can be seen in this CodePen - http://codepen.io/anon/pen/BHcJa/
Possible Solution
A solution which I have found to remedy this is to set the z-index for this handle to 0. There is already an existing if block for adding the ui-icon classes on Line 155 of resizable.js - https://github.com/jquery/jquery-ui/blob/master/ui/resizable.js
if ("se" === handle) { axis.addClass("ui-icon ui-icon-gripsmall-diagonal-se"); axis.css({ zIndex: 0 }); }
Of course when dealing with z-index there can be many possible issues so I leave it to you in order to determine the right solution
Thank you for looking at this.
The resizable icons have been removed as of jQuery UI 1.10. But with a little custom CSS you can get them back and this z-index issue if no longer a problem: http://jsfiddle.net/tj_vantoll/8GZnC/.