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

css, jquery-ui, jquery-ui-resizable, overflow

Solution

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;
}

Problem

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/

Original source