4

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.

Devjosh
  • 6,450
  • 4
  • 39
  • 61
Hussein
  • 42,480
  • 25
  • 113
  • 143

3 Answers3

8

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

Hussein
  • 42,480
  • 25
  • 113
  • 143
3
<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>
M.Nadeem Shaikh
  • 116
  • 1
  • 8
  • parent doesn't work, already discussed below. You also got rid of draggable which is needed. Please read all replies before answering. I already gave the working answer below. – Hussein Jan 25 '11 at 01:06
  • Thanks @jhanifen for voting. Whereas @Alex solution also works, if you add position relative to #container, it works – M.Nadeem Shaikh Jan 25 '11 at 01:58
  • his code works because he removed the draggable(). We want to keep draggable. – Hussein Jan 25 '11 at 03:19
  • setting max width and max height is not the right way of doing it. Just position the container div relative as i mentioned in my answer below and it's done. – Hussein Jan 25 '11 at 03:21
  • Works for me (similar problem, `snap: true` fixes it though, despite that it's slightly different) –  Dec 03 '13 at 17:53
0

It is a problem with adding draggable to it.

Try this example. Removed draggable, but added handles.

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

jhanifen
  • 4,441
  • 7
  • 43
  • 67