#8238 open bug ()

Opened April 05, 2012 08:11AM UTC

Last modified November 03, 2012 10:45PM UTC

Resizable: auto-wrapped elements should inherit zindex

Reported by: Davewp196 Owned by: Davewp196
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:
Description

I have two overlapping images within a division. I can make the second image ("logo") draggable, but when I make the image resizable, it drops behind the first image and I cannot resize the image.

Use case: As an editor, I want to be able to drag and resize an image within the constraints of an outer-division, using the mouse, so that I can correctly and easily see where to position an image.

Attachments (0)
Change History (5)

Changed April 05, 2012 10:55AM UTC by scottgonzalez comment:1

owner: → Davewp196
status: new → pending

Please follow the instructions in the red box and create a reduced test case in jsFiddle of jsbin.

Changed April 06, 2012 07:44AM UTC by Davewp196 comment:2

status: pending → new

Please see http://jsfiddle.net/davewp196/GZAwE/11/

In the example, the smaller jsfiddle logo is hidden after calling the resizable method is called, and draggable method no longer works.

Changed April 06, 2012 11:09AM UTC by scottgonzalez comment:3

description: I have two overlapping images within a division. I can make the second image ("logo") draggable, but when I make the image resizable, it drops behind the first image and I cannot resize the image. \ \ Use case: As an editor, I want to be able to drag and resize an image within the constraints of an outer-division, using the mouse, so that I can correctly and easily see where to position an image. \ \ Note that I've made the component draggable in the function extract below, and this works OK, and omitting it makes no difference to the problem. \ \ ----- Code ---- \ \ <div style="height:198px;width:940px;border-style: solid;border-width: 1px;border-color: black; display:inline-block"> \ <div id="esee_header_banner" style="display:inline-block; position:relative; vertical-align:middle;height:198px;width:940px"> \ <img src="http://localhost/4 windows.png" style="z-index:99;position:absolute;top:0px;left:0px" /> \ <img id="Logo" src="http://localhost/logo.png" style="z-index:1001;position:absolute;top:0px;left:0px;height:176px;width:155px" /> \ </div> \ <input type="hidden" id="logo_top" value="0"/> \ <input type="hidden" id="logo_left" value="0"/> \ <input type="hidden" id="logo_height" value="176"/> \ <input type="hidden" id="logo_width" value="155"/> \ <script type="text/javascript">Enable_Logo_Movement("Logo","logo_top","logo_left","logo_height","logo_width");</script></div> \ \ ----- \ \ Contents of Enable_Logo_Movement function \ \ var IMG,TOP,LEFT,HEIGHT,WIDTH; \ function Enable_Logo_Movement(img,top,left,height,width){ \ IMG=document.getElementById(img); \ if (IMG!=null){ \ TOP=document.getElementById(top); \ LEFT=document.getElementById(left); \ HEIGHT=document.getElementById(height); \ WIDTH=document.getElementById(width); \ IMG.style.effectAllowed="move"; \ jQuery(document).ready(function(){ \ var img="#"+IMG.id; \ jQuery(img).draggable({ \ containment:'parent', \ stop:function(event,ui){ \ LEFT.value=ui.position.left; \ TOP.value=ui.position.top; \ } \ }); \ jQuery(img).resizable({ \ containment:'parent', \ stop:function(event,ui){ \ HEIGHT.value=ui.size.height; \ WIDTH.value=ui.size.width; \ } \ }); \ }); \ }; \ } → I have two overlapping images within a division. I can make the second image ("logo") draggable, but when I make the image resizable, it drops behind the first image and I cannot resize the image. \ \ Use case: As an editor, I want to be able to drag and resize an image within the constraints of an outer-division, using the mouse, so that I can correctly and easily see where to position an image. \
summary: zindex is not respected. → Resizable: auto-wrapped elements should inherit zindex

Images ( and form controls) need to be wrapped in a div in order to be made resized. Make the image resizable, then make its parent draggable and set its zIndex. See http://jsfiddle.net/GZAwE/12/

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

milestone: 1.9.0 → 2.0.0

Changed November 03, 2012 10:45PM UTC by tj.vantoll comment:5

status: new → open