jQuery ui ReSizable con barras de desplazamiento

Question

Estoy tratando de tener un tamaño ajustable en un div, pero el identificador de resizer siempre está contenido en el div, lo puedo tener donde terminan las barras de desplazamiento.

/////////// Editar ///////////

lo he conseguido con JScrollPane pero después de usar jScroll Soy incapaz de cambiar el tamaño horizontalmente
demo http://i53.tinypic.com/906rk9.png

Answer 1

Debería funcionar, si pone un envoltorio alrededor del elemento para cambiar el tamaño, y hacer que este envoltorio sea redimensionable.

Yo estaba jugando con esa idea y este resultado parece funcionar:

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

Test with jsfiddle

Answer 2

jQuery UI equipo concider desplazable div tamaño variable como un mal diseño. Por lo que es "no solucionará función:. http://bugs.jqueryui.com/ticket/9119 Solución Dr.Molle como ya se ha dicho - envoltorio de tamaño variable para div desplazable

Answer 3

opción Comprobar http://api.jqueryui.com/resizable/#option-alsoResize

Esto funciona para mí

$(".responsive-table th").resizable({ 
       handles: "e", 
       containment: 'document', 
       alsoResize: ".responsive-table table" 
      });