jquery ui resizable div with scroll , the handle is moving when scrolling

Question

I have a problem getting the south handle to be stuck to the bottom when scrolling a resizable div , am using jquery ui resizable function to set a custom div as a handle, the resize functionality is working, but when i use the scrollbar the handle moves with the content, i want it to remain at the bottom of the div :

here is the html :

<div class="Container">
  <h2>Title</h2>

  <div class="Content">
   a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...

       <div id="handle" class = "ui-resizable-handle ui-resizable-s"></div>
    </div>
</div>

the jquery call to resize :

$(".Content").resizable({ handles: "s" });

and the css :

.Container
{
  width:250px; 
  padding:3px; 
  background:#f00;
}
.Content
{
    position : relative;
  height:224px;
   overflow:auto;
    background:#fff;
}

#handle {
    height : 8px;
    background : #00aa00;
    bottom:0;
}

Here is the jsfiddle :

http://jsfiddle.net/ftkbL/2389/

Answer 1

You should wrap your long text in a div and give overflow to that div

Working Demo

HTML

<div class="Content">
 <div class="text">blah... ..blah</div>
 <div id="handle" class = "ui-resizable-handle ui-resizable-s"></div>
</div>

CSS

.Content
{
background:#fff;
height:224px;    
}

.text
{
position : relative;
height:100%;
overflow:auto;
background:#fff;
}