Best IT Recipes

How to resize only horizontally or vertically using jQuery UI Resizable?

The only solution I found was to set the maximum or minimum height or width with the current value.

Example:

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

But this is really ugly, especially if I need to change the height of an element programmatically.

+78
jquery jquery-ui jquery-ui-resizable
Sep 02 2018-10-14T00:
source share
7 answers

You can set the handles parameter to show only left and right (or east / west), for example:

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

You can try it here.

+137
Sep 02 2018-10-14T00:
source share

While the poster mainly requested horizontal resizing, the question also requires vertical.

In the vertical case, there is a particular problem: you could set the relative width (e.g. 50%) that you want to keep, even when the browser window size changes. However, the jQuery user interface sets the absolute width to px after the initial resizing of the element and relative width.

If the following code is found 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 only the east handle

+24
Jun 02 '11 at 18:15
source share

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/

+16
10 Feb '12 at 10:41
source share

The solution is to configure your resize to undo the changes to the required size.

here is an example of vertically resizable only:

 foo.resizable({ resize: function(event, ui) { ui.size.width = ui.originalSize.width; } });
+9
Oct 29 '10 at 11:55
source share

I wanted to allow the resizing of the width when resizing the browser, but not when the user resizes the item, this works fine:

 foo.first().resizable({ resize: function(event, ui) { ui.element.css('width','auto'); }, });
0
Nov 20 '13 at 0:29
source share

For me, solutions with two handles and a resize handler worked fine, so the user sees the handle, but can only resize horizontally, a similar solution should work for the vertical. Without the bottom descriptor, the user may not know that he can resize the element.

When using ui.size.height = ui.originalSize.height; it will not work properly if the element has resized from its original 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 best performance, $(this) can 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", ''); } });
0
Mar 13 '14 at 13:19
source share
 Successfully working div position Vertically and horizontally ------------------------------------------------------------- <head> <style> .resizable { height: 100px; width: 500px; background: #09C; } .resizable-x { height: 100px; width: 500px; background: #F60; } </style> <script> $(function() { $( ".resizable" ).resizable({ grid: [10000, 1] }); $( ".resizable-x " ).resizable({ grid: [1, 10000] }); $( ".resizable" ).draggable(); }); }); </script>`enter code here` </head> <body> <div class="resizable"></div> <div class="resizable-x"></div> </body>
0
Jul 09 '14 at 6:02
source share


More articles:


All Articles