Databases
StackOverflow2013
Postsdbo
POjquery resizable doesn't work inside a scroll div container when we have scroll down
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery resizable doesn't work inside a scroll div container when we have scroll down
    text
    copied!<p>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.</p> <p>below is the code:</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery UI Resizable - Constrain resize area&lt;/title&gt; &lt;link rel="stylesheet" href="http://jqueryui.com//themes/base/jquery.ui.all.css"&gt; &lt;script src="http://jqueryui.com//jquery-1.8.0.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com//ui/jquery.ui.core.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com//ui/jquery.ui.widget.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com//ui/jquery.ui.mouse.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com//ui/jquery.ui.resizable.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com//ui/jquery.ui.draggable.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="../demos.css"&gt; &lt;style&gt; #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; } &lt;/style&gt; &lt;script&gt; $(function() { $( "#resizable" ).resizable({ containment: "#holder" }); $( "#resizable" ).draggable({ containment: "#holder" }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="demo"&gt; &lt;textarea cols=120 rows=10&gt;dddddddddddddddddddddddd&lt;/textarea&gt; &lt;input type=text value="ddddddddddddddddddddddddd"/&gt; &lt;div style="width:500px;height:600px"&gt; &lt;div id="container" class="ui-widget-content"&gt; &lt;h3 class="ui-widget-header"&gt;Containment&lt;/h3&gt; &lt;div id="gap" class="ui-widget-content"&gt; &lt;div id="holder" class="ui-widget-content"&gt; &lt;/div&gt; &lt;div id="resizable" &gt; &lt;h3 class="ui-widget-header"&gt;Resizable&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- End demo --&gt; &lt;div class="demo-description"&gt; &lt;p&gt;Define the boundaries of the resizable area. Use the &lt;code&gt;containment&lt;/code&gt; option to specify a parent DOM element or a jQuery selector, like 'document.'&lt;/p&gt; &lt;/div&gt;&lt;!-- End demo-description --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload