CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-resizable
Diego
Diego

Reputation: 16714

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

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.

Upvotes: 82

Views: 84331

Answers (7)

Vinod Kumar
Vinod Kumar

Reputation: 1311

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>

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630349

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.

Upvotes: 149

user133408
user133408

Reputation:

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

Upvotes: 0

Farhad Malekpour
Farhad Malekpour

Reputation: 1394

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

Upvotes: 1

Jan
Jan

Reputation: 179

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/

Upvotes: 17

cburgmer
cburgmer

Reputation: 2220

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

Upvotes: 27

Lambder
Lambder

Reputation: 2993

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

Upvotes: 9

Related Questions