Jquery's Resizable Div's Width and Height turns to 0 when resize

Question

I have this code:

<table>
    <tr>
        <td id="parent">
            <div id="child"></div>
        </td>
    </tr>
</table>

My JavaScript code:

$('#child' ).resizable({
    animate: true,
    helper: '.ui-resizable-helper',
    maxWidth: 500,
    maxHeight: 500,     
    aspectRatio: true
});

With the above code, My resizable div works as expected but when I add containment option, the div s width and height is resize to 0 , when resize in whatever direction.

   $('#child' ).resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: '#parent'
    });

Why is it happening? Is it a bug?

Answer 1

Try to add this CSS:

#parent {
  width: 500px;
  height: 500px;
}

Answer 2

The issue isn't with the #parent it's with the #child. Apply the following CSS so that it has a base start size.

#child {
  height:200px;
  width:200px;
}

Also you can see my fiddle here to illustrate the change using your code.

Answer 3

<table>
    <tr>
        <td>
            <div class="child" style="border:solid 1px red;">
            </div>
        </td>
                <td>
            <div class="child" style="border:solid 1px red;">
              <p>this is a test
            </p>
            </div>
        </td>
    </tr>
</table>

Define a minimum width and height for the child

.child {
 min-width:50px;
 min-height:50px;
}

Set containment to document and add the default minHeight , minWidth values.

  var defaultHeight = $('#child').height();
  var defaultWidth = $('#child').width();
 $('.child').resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        minHeight:defaultHeight,
        minWidth:defaultWidth,
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: 'document'
    });

fiddle