Lock Resizable jQuery UI to vertical resize only?

Question

I'm basically looking to lock this resizable element to a vertical resize only. I know that you can use minWidth/maxWidth and all that, but this sets the min and max to a specific number value, and if I resize the browser window these numbers are no longer accurate. Thoughts on how I could lock the resize?

Here is a code snippet:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#resizable" ).resizable(); } ); </script> <body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3> </div> </body>

Answer 1

You may use handles :

 $( "#resizable" ).resizable({ handles: 'n, s' });

 #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; }

 <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3> </div>

Answer 2

JQueryUI Resizable has 2 options that can be used to do this:

$( "#resizable" ).resizable({
   minWidth:150,
   maxWidth:150
});

Lock Resizable jQuery UI to vertical resize only?

Question

2 answers

solution1
2 ACCPTED 2017-09-11 14:42:09

solution2
0 2017-09-11 14:41:45

Lock Resizable jQuery UI to vertical resize only?

Question

2 answers

solution1 2 ACCPTED 2017-09-11 14:42:09

solution2 0 2017-09-11 14:41:45

solution1
2 ACCPTED 2017-09-11 14:42:09

solution2
0 2017-09-11 14:41:45