jQuery UI resizable : auto height when using east handle alone

Question

i have a jqueryui re-sizable div. I want only the width to be re-sizable and the height to remain auto, so that the div grows or shrinks with the content. If i set it to display only the east handle and use css height:auto , after resize the height also gets set even though only the width changed. I have to set the height to auto on resize event everytime like so:

resize: function(event, ui) {
    $(this).css('height', 'auto');
}

to prevent the height from being set. Is there a better way to prevent the height from getting set when only the east handle is used?

Answer 1

Try setting an aspect ratio AND the handles property:

    $( "#resizable" ).resizable({
        aspectRatio: 16 / 9,
                    handles: 'e'
    });

The above will create a container that will automatically re-size to a 16/9 aspect ratio, only with a handle on the east side of the container.

Here is the description from the documentation site at http://jqueryui.com/demos/resizable/#option-containment :

If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin.

If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

Code examples

Initialize a resizable with the handles option specified.

$( ".selector" ).resizable({ handles: 'n, e, s, w' });

Get or set the handles option, after init.

//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );