CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-draggable
Talon
Talon

Reputation: 4995

Dynamically position a div in the top left of a resizable element in JQuery UI

I'm creating a custom style for the Draggable interface of the JQuery UI you can see here:

http://psdesignzone.com/help/Designer.html

I'm having trouble getting the NW-Resize section working right, if you look at the top left of the box (e.g. the North West Resizable class) you'll see that it's positioned relatively at the start and looks good, but when you resize the box it get's all messed up.

I can't think of a way to get it to always positioned in the right place (because this is dynamically generated I can't change the actual HTML either.

Upvotes: 1

Views: 1624

Answers (1)

tw16
tw16

Reputation: 29585

This should do the trick. On .ui-resizable-nw change position:relative to position:absolute and change top:-166px to top:-10px.

Live example: http://jsfiddle.net/tw16/DNnSm/

.ui-resizable-nw {
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #666;
    border-width: 1px 0 0 1px;
    position: absolute; /* changed from relative */
    top: -10px; /* changed from -166px */
    left: -10px;
    cursor: nw-resize;
}

Upvotes: 4

Related Questions