Tuesday, April 5, 2011

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

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

Example:

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

But this is really uggly, specially if I have to change the elements height progammatically.

Sorry for my bad english, thanks in advance.

Diego

From stackoverflow
  • 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.

  • 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;
      }      
    }); 
    
    Diego : Woudn't that be kind of uggly too?

0 comments:

Post a Comment