jQuery UI可重新调整大小问题与框大小：边框框

我对jQueryUI的大小调整有一个问题：框大小：边框框。 如果删除框大小调整，它将按预期工作

单击可调整大小

输入元素将显示错误的大小

请帮我检查一下这个问题

图片：

HTML:

CSS:

---

这是上述代码的链接示例：

您需要为正在调整大小的输入元素设置最小高度-添加

min height

以匹配您正在设置的高度：

<input style="width: 200px; height: 30px; min-height: 30px; display: block; margin: 0px; position: relative; zoom: 1; top: auto; left: auto;" class="k-textbox ui-selectee" id="input_56cec649-f945-4f7e-87bd-c95abcae95e7_ui-id-2" />

但是，在本例中，将以下内容添加到CSS中：

.canvas * {
  box-sizing: content-box;
}

---

成功了。

好的，我支持你的建议

CSS

input.k-textbox{
    height: 30px !important; // Adjust your needs    
}

---

您需要给出最小高度：30px；输入框。但请记住，有一件事输入将被切割到低于30px的高度。

.k-textbox{
宽度：200px；最小高度：30px；显示：块；边距：0px；位置：相对；缩放：1；顶部：自动；左侧：自动；
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
}

设置

高度

<代码>框大小通过paddinghank@LuisP.a.单独设置大小！你能用jsfidddle更新你的解决方案吗？你应该制作jsfidddle，然后如果需要更新，我们会do@LuisP.A. 我已经在上面提供了JSFIDLE链接：我更新了你的JSFIDLE..，并在下面给出了答案谢谢帮助，但是我的输入元素是动态大小，当拖动图标大小调整处理程序时它会改变，并且样式（宽度、高度，…）Jquery UI将自动更新为内联样式。我不认为这是解决这个问题的最佳方案。输入样式内联是动态的，而不是固定宽度：200px高度：30px。我想还需要其他解决方案：）谢谢你的帮助，但这带来了一个问题：拖动调整大小图标时无法更改高度。这是一个

输入

（表示一行），可能你想要的是

文本区域

（多行）我的输入是一行，但需要更改大小：）@TienNguyen而不是

高度

设置

最小高度

<input style="width: 200px; height: 30px; min-height: 30px; display: block; margin: 0px; position: relative; zoom: 1; top: auto; left: auto;" class="k-textbox ui-selectee" id="input_56cec649-f945-4f7e-87bd-c95abcae95e7_ui-id-2" />

$('#resizeBtn').click(function () {
    var theInput = $('#input_56cec649-f945-4f7e-87bd-c95abcae95e7_ui-id-2');

    $(theInput).css({
        'min-width': $(theInput).outerWidth(),
        'min-height': $(theInput).outerHeight()
    });
    $(theInput).resizable();
});

.canvas * {
  box-sizing: content-box;
}

input.k-textbox{
    height: 30px !important; // Adjust your needs    
}

 <input class="k-textbox ui-selectee" id="input_56cec649-f945-4f7e-87bd-c95abcae95e7_ui-id-2" />

.k-textbox{
 width: 200px; min-height: 30px; display: block; margin: 0px; position:  relative; zoom: 1; top: auto; left: auto;
  -webkit-box-sizing:content-box;
 -moz-box-sizing:content-box;
 box-sizing:content-box;
}