Skip to main content

Search and Top Navigation

#9975 closed bug (notabug)

Opened April 10, 2014 05:55PM UTC

Closed April 10, 2014 06:33PM UTC

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:

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 -

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 -

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.

Attachments (0)
Change History (1)

Changed April 10, 2014 06:33PM UTC by tj.vantoll comment:1

resolution: → notabug
status: newclosed

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: