[英]Jquery's Resizable Div's Width and Height turns to 0 when resize
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 div
s width
and height
is resize to 0
, when resize in whatever direction. 使用上面的代码,我的可调整大小div
按预期工作,但是当我添加containment
选项时, div
的width
和height
调整为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? 这是一个错误吗?
Try to add this CSS: 尝试添加此CSS:
#parent {
width: 500px;
height: 500px;
}
The issue isn't with the #parent it's with the #child. 问题不在于#parent与#child的关系。 Apply the following CSS so that it has a base start size. 应用以下CSS,使其具有基本起始大小。
#child {
height:200px;
width:200px;
}
Also you can see my fiddle here to illustrate the change using your code. 此外,您可以在此处看到我的小提琴 ,以使用您的代码来说明更改。
<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. 将containment
设置为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'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.