Here is my complete code, which is derived from jQuery Resizable Example -
In my example, I have two elements div, with id parentand childwhere childis inside the element parent. My problem is that I cannot resize the item parent, even I made it resizable. Has anyone encountered a similar problem?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#parent {
padding: 40px;
width:400px;
height:400px;
}
#child {
width: 150px;
height: 150px;
}
</style>
<script>
$(function() {
$( "#child" ).resizable();
$( "#parent" ).resizable();
});
</script>
</head>
<body>
<div id="parent" class="ui-widget-content">
<h3>Parent</h3>
<div id="child" class="ui-widget-content">
<h3>Child</h3>
</div>
</div>
</body>
</html>
Note
Playing with the code, I just found out, this problem only arises when I make the element childre-accessible to the element parent. As in the code -
$(function() {
$( "#child" ).resizable();
$( "#parent" ).resizable();
});
If I change the order to -
$(function() {
$( "#parent" ).resizable();
$( "#child" ).resizable();
});
It will work smoothly. I am not sure why this is happening.
jQuery , - , .
-