How to resize ONLY horizontally or vertically with jQuery UI Resizable?

Question

The only solution I've found is to set the max and min height or width with the current value.

Example:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

But this is really ugly, especially if I have to change the element's height programmatically.

Answer 1

You could set the resize handles option to only show on the left and right (or east/west), like this:

foo.resizable({
    handles: 'e, w'
});​

You can give it a try here.

Answer 2

While the poster was mainly asking for a horizontal-only resize, the question does ask for vertical, too.

The vertical case has a special issue: You might have set a relative width (e.g. 50%) that you want to keep even when the browser window is resized. However jQuery UI sets an absolute width in px once you first resize the element and the relative width is lost.

If found the following code to work for this use case:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

See also http://jsfiddle.net/cburgmer/wExtX/ and jQuery UI resizable : auto height when using east handle alone

Answer 3

A very simple solution:

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

This works for draggable() as well. Example: http://jsfiddle.net/xCepm/

Answer 4

The solution is to configure your resizable so it cancels changes of the dimension you don't want.

here is an example of vertically only resizable:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});