CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Zac.Ledyard
Zac.Ledyard

Reputation: 162

Jquery UI Resizing issue

I have some re-sizable divs on my page but I am having issues when I re size them. The Jquery UI works fine, there is no problem moving them around or re-sizing them, but when they are re-sized, the div below them acts as if they are no longer present, and it jumps up to their place. This only happens when they are re-sized though, moving them will not cause this. Here is a fiddle with my issue: http://jsfiddle.net/367wm/

JS:

$(document).ready(function() {
    $( "#header" ).draggable();
    $( "#h-window" ).draggable();
    $( "#p-window1" ).draggable();
    $( "#p-window1" ).resizable();
    $( "#p-window2" ).draggable();
    $( "#p-window2" ).resizable();
    $( "#p-window3" ).draggable();
    $( "#p-window3" ).resizable();
  });

Upvotes: 0

Views: 53

Answers (1)

gfrobenius
gfrobenius

Reputation: 4067

Here you go: http://jsfiddle.net/367wm/4/

Basically all I changed was making your divs absolute positioned. I also added a scroll to your div with all the text in it.

So look for these styles I added to the four divs:

style="position:absolute; top:1px;"
style="position:absolute; top:100px; overflow-y:scroll;"
style="position:absolute; top:325px;"
style="position:absolute; top:400px;"

Upvotes: 3

Related Questions