CODEWITHSUNDEEP
jqueryresizablecontainment
Hussein
Hussein

Reputation: 42818

jquery dom resizable draggable containment issue

Why is jquery resizable() not resizing to full width and height of the containment id assigned to it. You can try it at http://jsfiddle.net/C8YSU/6/ and see what i mean. Try to resize the created div, it will not resize to full width and height on the parent #container div. This seems to be caused by the draggable() function.

Upvotes: 4

Views: 6624

Answers (3)

M.Nadeem Shaikh
M.Nadeem Shaikh

Reputation: 116

<script type="text/javascript">
        $("button").click(function () {
            var elm = $('<div id="divId" class="adiv abs"></div>');
            elm.appendTo('#container').resizable({
                containment: "parent"
            });
        });
    </script>

Update

<script>
        $("button").click(function () {
            var elm = $('<div id="divId" class="adiv abs"></div>');
            elm.appendTo('#container').draggable({
                snap: true,
                containment: 'parent'
            }).resizable({
                maxWidth: 300,
                maxHeight: 300
            });
        });

</script>

Upvotes: 3

Hussein
Hussein

Reputation: 42818

Adding a relative position to the #container div fixed the problem.

Upvotes: 8

jhanifen
jhanifen

Reputation: 4591

It is a problem with adding draggable to it.

Try this example. Removed draggable, but added handles.

http://jsfiddle.net/C8YSU/7/

Upvotes: 0

Related Questions