resizable with parent containment not working vertically
Resizable containment doesn't seem to be working for me. In my example
below, a draggable is cloned after being dragged to a droppable. The
new div is set as resizable with a containment of 'parent'. The parent
is the div with id=2. The new div can be resized horizontally and this
resizing is being contained. The problem is that the new div cannot be
resized vertically. If containment is set to 'document', the new div
can be resized both horizontally and vertically, but this is not the
containment I'm looking for. Also, setting containment to '#2' or
'.droppable-div' doesn't work right either.
Am I doing something wrong or is this a bug?
<html>
<head>
<title>JQuery Resizable Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
.mytable {border: solid #e78f08; border-width: thin; background:
#f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50%
repeat-x; color: #ffffff; width: 500px;}
.mycell {border: solid; border-top-width: 0px; border-left-width:
0px; border-right-width: 0px; border-bottom-width: thin; width: 500px;
height: 40px}
.draggable-div { color:black; width: 150px; height: 20px; left:
35px; overflow: hidden; background: #ccffcc; font-size: 12pt}
.droppable-div { width: 500px; }
</style>
<script src="../lib/jquery/js/jquery-1.3.2.min.js" type="text/
javascript"></script>
<script src="../lib/jquery/js/jquery-ui-1.8a1.js" type="text/
javascript"></script>
<link type="text/css" href="../lib/jquery/css/ui-lightness/jquery-
ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$(".draggable-div").draggable({
helper: 'clone'
});
$(".droppable-div").droppable({
tolerance: 'fit',
drop: function(event, ui){
var myDiv = $(ui.helper).clone();
$(myDiv).prependTo(this);
$(myDiv).text("resizable in table");
$(myDiv).resizable({
containment: 'parent',
}
});
}// end drop
});
});
</script>
</head>
<body>
1. Drag "resizable" into table.
2. Resize "resizable in table". Can move horizontally but not
vertically.
3. Changing containment property from parent to '#2' or
'.droppable-div' doesn't help.
<div id="1" class="draggable-div">resizable</div>
<div id="2" class="droppable-div">
<table class="mytable">
<TR><TD class="mycell"></TD></TR>
<TR><TD class="mycell"></TD></TR>
<TR><TD class="mycell"></TD></TR>
</table>
</div>
</body>
</html>