Demo of Resizable with minHeight option

50 100 200

While resizing, the height of the element is restricted to value of minHeight option. We can set ( update ) the value and read the set value of minHeight.

By selecting the radio buttons we can change the value of minHeight option. You can try to drag the element in up or down ( n, s) direction after changing the selections of radio buttons.
We are reading the set value and displaying the same.

Tutorial Resizable

Full Code

$(document).ready(function() {
$( "#resize_id" ).resizable({
handles : "n,e,ne,w,s,nw"
var read_opt = $( "#resize_id" ).resizable( "option", "minHeight" );
$('#d1').html( " <b>Value of minHeight Option:</b> " + read_opt );
/////// Clikc event of radio buttons///
$("input:radio[name=r1]").click(function() {
var sel=$(this).val(); 
// set the option value
$( "#resize_id" ).resizable( "option", "minHeight", sel );
// get the option value 
var read_opt = $( "#resize_id" ).resizable( "option", "minHeight" ); 
$('#d1').html( " <b>Status of minHeight:</b> " + read_opt );
////Click event end///
<table class='table'>
<input type='radio' name='r1' id='r1' value=50 >50</td>
<td><input type='radio' name='r1' id='r2' value=100>100</td>
<td><input type='radio' name='r1' id='r2' value=200 checked>200</td>
<button type='button' class='btn btn-secondary'  id=d1></button></td>

<div class='row'> <div class='col-md-12'>

<div id="resize_id" class=resize_cl></div>


Tutorial Resizable

Options|resizable|alsoResize|animate | animate get set|animateDuration| animateEasing|aspectRatio| autoHide cancel classes containment disabled ghost grid handles helper maxHeight maxWidth minWidth minHeight


destroy disable enable