CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-resizable
Mironline
Mironline

Reputation: 2799

jQuery Resizable change other elements' positions

I have 3 div inside one parent div , when you want to re-size the element for the first time , other elements' positions change , JSFIDDLE

here is my code :

HTML

<div class="parent">
<div class="element" >BOX1</div>
<div class="element" >BOX2</div>
<div class="element" >BOX3</div>
</div>

CSS

.parent { 
    width:300px;
    height:300px;
    background:#e0e0e0
}
.element {
    width:100px;
    height:20px;
    background:red;
}

JS 

$(document).ready(function() {
    var x = 0;
    $('.element').each(function() {
        x++;
        $(this).draggable({
            containment: $('.parent')
        });
        $(this).resizable({
            containment: $('.parent')
        });
        $(this).css('left', x * 50);
        $(this).css('top', x * 50);
    });
});

JSFIDDLE

Upvotes: 3

Views: 4677

Answers (1)

Death
Death

Reputation: 2017

Your elements have a position:relative, meaning each time one of the boxes is changed, it becomes absolute and is 'taken out' of the flow of the page, so the other boxes move up to fill in the space left by it.

Changing the .element boxes to position:absolute; fixes this.

.element {
width:100px;
height:20px;
background:red;
position:absolute;
}

Example: http://jsfiddle.net/WRL8u/3/

Upvotes: 8

Related Questions