CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Shishant
Shishant

Reputation: 9294

jQuery ui ReSizable with scroll bars

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.

demo

/////////// Edit ///////////

I have achieved it with jScrollPane but after using jScroll I am unable to resize horizontally.
demo http://i53.tinypic.com/906rk9.png

Upvotes: 13

Views: 17102

Answers (3)

Dzenly
Dzenly

Reputation: 1841

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.

Upvotes: 4

Ajsti.pl - Maciej Szewczyk
Ajsti.pl - Maciej Szewczyk

Reputation: 193

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"
            });

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117334

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>

Test with jsfiddle

Upvotes: 26

Related Questions