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(),
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>