javascript - 防ぐリサイズから

Question

<label></label>内部に入力テキストボックスを持つDIV要素があります。

基本的に、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 のサイズ変更可能なものには minWidth プロパティがあります (ドキュメントの例):

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

したがって、maxWidthProperty を に設定できます$("label").width()。