I am trying to have a resizable on a div, but the resizer handle is always contained within the div can I have it where scrollbars end.
/////////// Edit ///////////
I have achieved it with jScrollPane but after using jScroll I am unable to resize horizontally.
demo http://i53.tinypic.com/906rk9.png
It should work, if you put a wrapper around the element to be resized, and make this wrapper resizable.
I was playing around with that idea and this result seems to work:
<script>
$(document).ready(function() {
$(".resizable")
.wrap('<div/>')
.css({'overflow':'hidden'})
.parent()
.css({'display':'inline-block',
'overflow':'hidden',
'height':function(){return $('.resizable',this).height();},
'width': function(){return $('.resizable',this).width();},
'paddingBottom':'12px',
'paddingRight':'12px'
}).resizable()
.find('.resizable')
.css({overflow:'auto',
width:'100%',
height:'100%'});
});
</script>
jQuery UI team considers scrollable resizable div as a bad design. So it is "won't fix feature: http://bugs.jqueryui.com/ticket/9119 Workaround as Dr.Molle already stated - resizable wrapper for scrollable div.
Check option http://api.jqueryui.com/resizable/#option-alsoResize
This works for me
$(".responsive-table th").resizable({
handles: "e",
containment: 'document',
alsoResize: ".responsive-table table"
});
