当调整大小时，Jquery可调整大小的Div的宽度和高度变为0

I have this code:

我有这段代码:

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

My JavaScript code:

我的JavaScript代码:

$('#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 divs width and height is resize to 0, when resize in whatever direction.

使用上面的代码，我的可调整大小的div按预期工作，但是当我添加包含选项时，div的宽度和高度将调整为0，无论调整到什么方向。

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

Why is it happening? Is it a bug?

为什么会发生这样的事?这是一个错误吗?

3 个解决方案

#1

Try to add this CSS:

尝试添加这个CSS:

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

#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.

问题不在于#parent，而在于#child。应用以下CSS，使其具有基本的起始大小。

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

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

您也可以在这里看到我的小提琴，用您的代码演示更改。

#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.

将包含设置为document，并添加默认的minHeight、minWidth值。

  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

小提琴

#1