CODEWITHSUNDEEP
jquerydraggablecss-positioncropresizable
user1351031
user1351031

Reputation: 11

Jquery resizable issue where div contracts to have width and height of zero

I'm having a problem with jquery UI's resizable. I have looked around everywhere and cannot find someone with the same problem as me. Basically when I try to resize the div from any of the edges or corners, its width and height go to 0.

Here's what my HTML, CSS and JS are.

HTML:

<div class="container">
    <img src="http://www.deshow.net/d/file/cartoon/2008-12/bob-ross-landscape-painting-281-2.jpg" width="500"></img>
    <div class="crop"></div>
</div>

CSS:

div.container {
    position: relative;
    margin-top: 5px;
}
img {
    position: absolute;
    top: 0;
    left: 0;
}
div.crop {
    position: absolute;
    width: 300px;
    height: 200px;
    border: 2px dashed black;
    z-index: 10;
}

Javascript:

$('div.crop').draggable({
    containment: 'parent',
}).resizable({
    containment: 'parent',
    handles: 'all',
    aspectRatio: 3/2
});

I have replicated the problem on jsfiddle here http://jsfiddle.net/MWcPv/

Any help is appreciated.

Thanks

Upvotes: 1

Views: 1264

Answers (1)

Aamir Afridi
Aamir Afridi

Reputation: 6411

The problem was with the aspect ration.

Also the parent has no height and width i.e content inside is absolute positioned so the parent has 0 height and width. I have added the height and width to the parent and disabled the aspect ration. Try this http://jsfiddle.net/aamir/MWcPv/6/

$('div.crop').draggable({
containment: 'parent',
}).resizable({
    containment: 'parent',
    handles: 'all',
    aspectRatio: 16 / 12
});

Upvotes: 1

Related Questions