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.

score 148 · Accepted Answer · edited May 05 '16 at 08:23

148

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.

edited May 05 '16 at 08:23

SergA

1,097
13
21

answered Sep 02 '10 at 14:43

Nick Craver

623,446
136
1,297
1,155

8

I just found a caveat with this solution. It will still put the width & height when done as an inline style. This is causing problems for me with a vertical only solution. Once I've resized it the width is set and it is no longer 100% (but a px value). Just putting this here in case others are searching and come across it. – Fernker Feb 04 '14 at 21:54
@Fernker Yes, that's a pain. – Ben Jul 11 '14 at 11:01
you can get get back a percentage width if you give min-width and max-width properties of the same value to your div. It won't get overriden :) – Sébastien Apr 03 '15 at 15:05
2

Fails the shift-drag test. – nothingisnecessary Mar 09 '16 at 17:48
@nothingisnecessary can you describe the "shift-drag test"? – jrz Mar 22 '17 at 15:14
@Jon z Hold `Shift` while dragging with mouse to maintain proportions when resizing. In this case the height changes though that is what the OP was trying to avoid. – nothingisnecessary Mar 22 '17 at 21:05

score 27 · Answer 2 · edited May 23 '17 at 10:31

27

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

edited May 23 '17 at 10:31

Community

1
1

answered Jun 02 '11 at 18:15

cburgmer

2,150
1
24
18

2

Very interesting, thank you. I'll keep it in mind. I think it is important to remark that the resizable element has to have its width set by css if not it will be lost after resizing. See here http://jsfiddle.net/paska/wExtX/10/ – Diego Jun 02 '11 at 18:46
1

This is the solution I was looking for. For some reason even though the handle is disabled for the region, it's dimensions seem to still be set to px. If you don't use this method you loose your % based height or width. – Serhiy Nov 19 '12 at 20:38
Actually this doesn't seem to work in jQuery-ui 1.11.0. The CSS width set directly on the element isn't taken from the initial width. I'm trying to set width to be a percentage and it gets written over with a number of `px`. – Ben Jul 11 '14 at 12:04
Thanks, this trick also came in handy to ignore the 'shift-drag' that maintains the aspect ratio while resizing (for horizontal resizing, set css `height` to `''` in the `resize` and `stop` handlers) – nothingisnecessary Mar 09 '16 at 17:46

score 17 · Answer 3 · answered Feb 10 '12 at 10:41

17

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/

answered Feb 10 '12 at 10:41

Jan

179
1
2

1

It is really ugly!! Also, the correct solution (the one we are supposed to use) is @Nick Craver's – Diego Feb 10 '12 at 18:13
1

I agree! :-) But it's nice that it works with resizable() and draggable(). – Jan Feb 10 '12 at 23:00
1

I like this one! Besides being mathematically cool, it leaves the handle in the bottom-right corner, giving a visual hint that the element is resizable. In the accepted solution the resize handle is hidden, and the user has to guess that the bottom margin is a hot spot. – corwin.amber Aug 13 '15 at 05:20
This is perfect for the reasons @corwin.amber stated – Lombas Feb 05 '16 at 19:05
That was perfect for my needs : `{handles: 'se', grid: [10000, 1], autoHide: true}` – electrotype Sep 17 '17 at 13:40

score 9 · Answer 4 · answered Oct 29 '10 at 11:55

9

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

answered Oct 29 '10 at 11:55

Lambder

2,953
1
26
20

Woudn't that be kind of uggly too? – Diego Oct 29 '10 at 15:08
1

This way the user sees a handle he cannot use. – nima Dec 30 '12 at 11:41

score 1 · Answer 5 · answered Nov 20 '13 at 00:29

1

I wanted to allow re-size the width when browser re-sizes, but not when user changes the size of element, this worked fine:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});

answered Nov 20 '13 at 00:29

Farhad Malekpour

1,314
13
16

score 0 · Answer 6 · answered Mar 13 '14 at 13:19

For me solutions with both handles and resize handler worked fine, so user see handle but can resize only horizontally, similar solution should work for vertical. Without bottom right handler user might be unaware that he can resize element.

When using ui.size.height = ui.originalSize.height; it will not work properly if element changed it's size from initial state.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

For better performance $(this) could be removed:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

score 0 · Answer 7 · edited Nov 05 '21 at 13:59

Successfully working div position Vertically and horizontally

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <style>
    .resizable {
      height: 100px;
      width: 500px;
      background: #09C;
    }
    
    .resizable-x {
      margin-top: 5px;
      height: 100px;
      width: 500px;
      background: #F60;
    }
  </style>

  <script>
    $(function() {
      $(".resizable").resizable({
        grid: [10000, 1]
      });
      $(".resizable-x ").resizable({
        grid: [1, 10000]
      });
      $(".resizable").draggable();
    });
  </script>
</head>

<body>
  <div class="resizable"></div>
  <div class="resizable-x"></div>
</body>

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

7 Answers7

Successfully working div position Vertically and horizontally

Linked