Jquery UI resizable issue expands beyond containment (draggable also used)

Question

The problem i am facing is with the resizability of the div. When i use it with Draggable, it gives the problem and not able to resize it width-wise.

If i use the resizable alone, then it is fine. But i need to make it work with draggable feature.

Pls suggest.

click the jsFiddle link for the demo.

Answer 1

Adding a position:relative; to the container solves the issue.

See this working Fiddle Example!

#ParentDIV {
    position: relative;
}

Answer 2

If your draggable element is absolutely positioned and your container is absolutely positioned you can set the dragged element to a fixed width and height. This will create a bounding box and prevent the draggable from falling off the edges.

#container {
    position:absolute;
}

#draggedObject {
    position:absolute:
    width: 100px;
    height: 50px;
}