JQuery ui ReSizable с полосами прокрутки

Я пытаюсь изменить размер в div, но дескриптор resizer всегда содержится внутри div, я могу использовать его, где заканчиваются полосы прокрутки.

///////////Редактировать///////////

Я достиг этого с помощью jScrollPane, но после использования jScroll я не могу изменить размер по горизонтали.
demo http://i53.tinypic.com/906rk9.png

Ответ 1

Он должен работать, если вы поместите обертку вокруг изменяемого элемента и сделайте эту обертку изменчивой.

Я играл с этой идеей, и этот результат, похоже, работает:

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

Тест с jsfiddle

Ответ 2

jQuery UI team concider scrollable resizable div как плохой дизайн. Так что это "не будет исправлять функцию: http://bugs.jqueryui.com/ticket/9119 Обходной путь, о котором уже говорил Dr.Molle, - изменчивая оболочка для прокручиваемого div.

Ответ 3

Проверить опцию http://api.jqueryui.com/resizable/#option-alsoResize

Это работает для меня

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