JQuery UI Resizable

I am using JQuery UI to re-size a div vertically only (dragging from the bottom edge. I set the div height:200px and overflow:auto.

The JQuery looks like this:

$("#resizable").resizable({handles: 's',ghost: false,animate: false,});
$("#resizable" ).resizable({ maxHeight: 300 });

The re-size function works great while the div is empty or has content but no overflow. if however there is an overflow, the drag handle moves out o开发者_StackOverflowf place up (from the bottom) as I move the scroll bar down. It does not stay on the bottom edge which drives me crazy because it makes it unusable.

I can not figure out how to fix this. Could some one please help out?

Thank you!

HTML:

<div id="resizable" class="divTop">
  <div class="dataView">
    <?php require_once(ROOT_PATH.'user/controls/data/get_data.php'); ?>
  </div>
</div>

Did you try putting a the content inside another div which is(for example) 90% of the resizable div?

jQuery methods modify the HTML, they aren't magic. Look at the new HTML in Firebug and find ways to work around it.