Search code examples
javascriptjquery-uihtmldraggableresizable

JQuery resizeable and dragable divs positioning problems


I'm having trouble properly positioning some divs within a larger div and having them behave as I want.

The source and a preview is here: http://jsbin.com/usuniw/6/edit

Problem 1

When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place

Problem 2

When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.

Thanks for any help you can give.


Solution

  • At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.

    If you get rid of the float:right on #selectedResult and instead set it to:

    position: absolute; 
    right:0; 
    top:0;
    

    And set the #ipad element to:

    position:relative;
    

    Then the element will be fixed to the top and right sides of its parent.

    You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview