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

jquery jquery-ui jquery-ui-resizable

Diego · Sep 2, 2010 · Viewed 76.2k times · Source

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

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