JQuery UI resizable: auto height when using only east handle

Question

I have a jqueryui re-sizable div. I want only the width to be measurable and the height to remain automatic, so that the div grows or shrinks with the content. If I set it to display only the eastern descriptor and used css height:auto , after resizing, the height will also be set even when changing the width. I have to set the height every time to automatically resize:

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

to prevent height adjustment. Is there a better way to prevent height adjustment when using only the eastern handle?

Answer 1

Try setting the aspect ratio and the handle property:

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

The above will create a container that will automatically resize to 16/9, only with a handle on the east side of the container.

The following is a description from the documentation site http://jqueryui.com/demos/resizable/#option-containment :

If specified as a string, a comma-separated list of any of the following: "n, e, s, w, ne, se, sw, nw, all". The necessary pens will be automatically 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 must be a jQuery selector corresponding to a resizable child element to use as this handle. If the handle is not a child of the resizable element, you can directly pass it to a DOMElement or a valid jQuery object.

Code examples

Initialize resizing using the specified option.

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

Get or set the handle parameter after init.

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