Search code examples
jquerycssjquery-uijquery-resizable

Trouble with jQuery resizable (of an absolute div within a relative div with scroll)

I have the following basic layout:

<div class="Container">
    <div class="Content"></div>
    <div class="Selector"></div>
</div>

The idea is that the selector div is marking an area within the content, and that area can be resized:

div.Container
{
    border: 2px solid #00F;
    width: 240px;
    height: 300px;
    overflow: auto;
    position: relative;
}

div.Selector
{
    position: absolute;
    top: 0px !important;
    left: 80px;
    width: 50px;
    height: 500px;
    border-left: 2px solid #F00;
    border-right: 2px solid #0F0;
    z-index: 10000;
}

div.Content
{
    height: 500px;
    border: 1px solid #DEDEDE;
   background-color: #EFEFEF; 
}

And the resizable selector:

$(document).ready(function() {
    $("div.Selector").resizable();
});

The problem, which can be seen here - http://jsfiddle.net/sXqbV/2/ - is happening when the container is horizontally scrolled.

Once the div is being resized (by slightly dragging its right edge), its left position is reduced (relatively to the scroll position):

enter image description here

I had a similar issue with the vertical scroll, but I solved it by adding !important to the top style. I cannot do it with the left position though, because I will probably need it to be resizable from the left too.

How can I fix this problem?

Solution

  • I've never used resizable, I just browsed its code and found it. (so don't ask me why)

    $(document).ready(function() {
    $("div.Selector").resizable({containment: $('div.Container')}); 
});

    See fiddle