Trouble with resizable handles with div set to overflow: auto;
Hi all,
I have a fixed height div with overflow set to auto that I want my
users to be able to resize.
HTML:
<div id="pieces>
lots of stuff in here
</div>
CSS:
#pieces {
height: 300px;
overflow: auto
}
And finally JS:
$("#pieces").resizable( { grid: [0,23], minHeight: 300, handles:
's' } );
jQuery is properly adding a Southern handle, but when the user scrolls
#pieces, the handle scrolls with it when I want it to stay at the
bottom of the div (or below). I tried making a custom handle
underneath #pieces like this:
HTML:
<div id="pieces>
lots of stuff in here
</div>
<div id="piecesResizer" class="ui-resizable-handle ui-resizable-s"></
div>
CSS:
#pieces {
height: 300px;
overflow: auto;
}
#piecesResizer {
height: 10px;
background: black;
}
JS:
$("#pieces").resizable( { grid: [0,23], minHeight: 300, handles:
{ 's':"#piecesResizer" } } );
But it's not resizable any more.
Is there a way to keep the default South handle from scrolling with
its DIV? Or is there a more correct way to use a custom Southern
resizer that's OUTSIDE of the resized DIV?
Thank you,
Jay