Issue setting initial draggable position jquery ui

Question

I've a problem, when I set container element:

position: absolute;
left: 10px;
bottom: 15px;

And initialize draggable, bottom part of the element gets stuck to the border, and it is basically resizing rather than dragging.

http://jsfiddle.net/JVSFS/83/

So what do I do?

Answer 1

jQuery draggable works by modifying the left and top css properties of an object.

Set the top property instead of the bottom . I know it sounds like a cheap trick, but it's the fastest solution I found here.

Answer 2

It is doing what you told it to do. When you set bottom to be 10px on an absolutely-positioned element, the bottom of that element will stay 15px from the bottom of its parent container.

It might be better in your situation to set the CSS to position:relative using mousedown() in your jQuery.

Answer 3

You might want to go about it by removing

.popup_click {position: absolute left: 10px; bottom: 15px;}

and replacing it with: .popup_click {top: 92%; left: 1%;} .popup_click {top: 92%; left: 1%;}

Fiddle

Please note that the percentages are just estimates based on where you had it placed before.