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>
<p>1. Drag "resizable" into table. <br>
2. Resize "resizable in table". Can move horizontally but not
vertically. <br>
3. Changing containment property from parent to '#2' or
'.droppable-div' doesn't help. <br>
</p>
<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>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
