3

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?

Amit
  • 1,174
  • 2
  • 15
  • 22

1 Answers1

4

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

ori
  • 7,817
  • 1
  • 27
  • 31
  • That does fix the problem I was describing, but now there is a new problem - when trying to drag while the container is vertically scrolled, the height of the selector is now being reduced (so the lines do not reach the bottom). – Amit Feb 04 '12 at 19:16
  • Now you can drop the `!important`, see [fiddle](http://jsfiddle.net/orig/UMhE2/1/) – ori Feb 04 '12 at 19:20