Demo of Resizable with minHeight option
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
<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
minHeight:200,
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///
})
</script>
HTML
<table class='table'>
<tr><td>
<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>
<td>
<button type='button' class='btn btn-secondary' id=d1></button></td>
</tr></table>
<div class='row'> <div class='col-md-12'>
<div id="resize_id" class=resize_cl></div>
</div></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
Events
destroy
disable enable