jQuery - resizable + draggable, the scrolling(left,top) is not added

Question

I have a problem with a dragging and resizable box. It works fine, drags and rezises fine, but i have a container that holds these elements and as soon as I trigger an overflow and attempt to rezise the div it fails and resets backs to container width. http://jsfiddle.net/JTTYM/26/

---

UPDATE:: Ok, maybe Im describing the problem wrong, Go to this url: http://jsfiddle.net/JTTYM/52 and scroll to find the green box, then attempt to resize it. Once resized the overflow scroll bars disappear. As said above, it's like the overflow values are not counted in a resize

Answer 1

This come from your .layer { position: absolute; }.

When you're using an absolute position, remember to always set a relative position on a parent, or you'll have many issues.

In your case, just add this CSS :

.layers_group {
   position: relative;   
}

Example:

$(function() {
    $(".live_resizable").resizable();
    $(".live_draggable").draggable();
});

.main {    
    position:absolute;
    right:25px;
    left: 25px;
    top: 25px;
    bottom: 25px; /*200*/
    overflow:auto;
    border:2px solid red;
}
.layers_group {
   position: relative;   
}
#stuff {
    width: 600px;
}
.layer {    
    background-color: green;
    width: 100px; 
    height: 100px; 
    top: 900px; 
    left: 900px;
    cursor:move;
}

/* Jquery to add hangles i think */
.ui-resizable { position: absolute;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block;  }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; background:url(images/corner.gif); }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<div class="main">
    <div id="stuff">
        <div class="layers_group aaasdasd">
            <div class="live_draggable live_resizable layer"></div>
        </div>
    </div>
</div>