if i move the resize to right near the #holder width ,then the resize can reach wider than the #holder width. that means the containment constraint take no effect now!
how can I do to make it work as normal???? thanks a lot!
precondition: I must keep the style of container .overflow:auto;position:relative …etc.
they must be kept for some reason.
below is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Constrain resize area</title>
<link rel="stylesheet" href="http://jqueryui.com//themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com//jquery-1.8.0.js"></script>
<script src="http://jqueryui.com//ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com//ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com//ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com//ui/jquery.ui.resizable.js"></script>
<script src="http://jqueryui.com//ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#container { width: 500px; height: 500px;overflow:auto;position:relative }
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable { width: 150px; height: 150px;left:80px;top:50px;background-color:red;border:2px }
#resizable, #container { padding: 0.5em; }
#gap { width: 1000px; height: 1000px; position:absolute;left:0;top:0; }
#holder { width: 800px; height: 800px; position:absolute;left:0;top:0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
containment: "#holder"
});
$( "#resizable" ).draggable({
containment: "#holder"
});
});
</script>
</head>
<body>
<div class="demo">
<textarea cols=120 rows=10>dddddddddddddddddddddddd</textarea>
<input type=text value="ddddddddddddddddddddddddd"/>
<div style="width:500px;height:600px">
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<div id="gap" class="ui-widget-content">
<div id="holder" class="ui-widget-content">
</div>
<div id="resizable" >
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
</div><!-- End demo-description -->
</body>
</html>
You need a theme to run this code.
In my computer, I just changed
with
and it rocks. As an example, download the theme ui-lightness_1.8.24, change your demo css with it and try again.