javascript - 防止从调整大小

Question

我有一个 DIV 元素，其中有一个<label></label>输入文本框。

基本上，我在 DIV 元素上启用了 jQuery .resizable() ，但是当您使 DIV 元素小于当前值时，文本框会被推到新行上。

我怎样才能强制它<label>永远不会小于设定的尺寸？

谢谢！

<div id='div1' style='width:300px'>
    <label>Test&nbsp;
        <input type='text' style='width:100px' id='inputBox'/>
    </label>
</div>

$("#div1").resizable({
    handles: "e, w, sw, ne, nw, se"
});

Answer 1

给它一个min-width：

<div id='div1' style='width: 300px; min-width: 300px;'>

或者，最好：

#div1 {
    min-width: 300px;
    width: 300px;
}

Answer 2

jQuery UI 的 resizable 有一个 minWidth 属性（来自文档的例子）：

$( "#resizable" ).resizable({
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 150,
      minWidth: 200
});

所以你可以将 maxWidthProperty 设置为$("label").width().