Resizable and draggable with relative position in div container

[subzero66]

I defined two divs with resizable/draggable attributes using a relative position within a parent div container. Dragging works just fine. Both inner divs can be dragged within the parent container. When resizing the first div the second div "jumps" to a different position. When looking at the resizable.js I found that the position it being changed to absolute in line 224:

el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });

Please find attached my example HTML. It's a modified version of the JQuery example code.

[subzero66]

Resizable for relative positioned divs

[subzero66]

I found out how to work around this. You need to declare the container as relative and the inner divs as absolute.

<div id="inner_container" style="position: relative; height: 800px;">
   <div id="resizable1" style="position: absolute; top: 100px; left: 100px;>
      ...
   </div>
</div>

[Jörn Zaefferer]

Sounds like this doesn't require any further actions. Please reopen when it actually does.

[webPragmatist]

Is there a reason that this is hardcoded into this UI plugin? I am having to now add extra markup just to remove this style.

[webPragmatist]

My apologies for not further investigating this issue. It seems that the resizable widget looks for ui-draggable as a style in order to determine an absolute or relative positioning.

Is this necessary and if so is it documented?

[[email protected]…]

I have similar problem in my case. This issue is either not solved or I have a bug in my code. Please take a look at ​http://jsfiddle.net/MbYq6/ and advise.

[Scott González]

Milestone TBD deleted