Search code examples
javascriptjqueryjquery-uijquery-ui-resizable

Don't keep aspect ratio with jQuery resizable while holding shift


I'm resizing a div with jQuery resizable and I only want to resize its height.

I managed to only resize while dragging bottom helper :

$('div').resizable({
   handles: 's',
});

But if I hold shift key, width is changing. See http://jsfiddle.net/6p20qjmr/3/

How can I disable this behavior?

Edit: The div container width may change after initial resizable call.


Solution

  • I find a way to achieve what I want using resize parameter and reseting width after every resize event:

    $(".resize").resizable({
        handles: 's',
        resize: function() {
            $(this).css('width', '');
        }
    });
    

    See http://jsfiddle.net/6p20qjmr/4/