Question

我发布了Jquery UI Resizable和box-sizing：border-box。如果删除框大小，它将按预期工作。

点击以调整大小
输入元素将显示错误的大小。

请帮我查一下。

图片：http://i.stack.imgur.com/RhNpI.jpg

HTML：

<button id="resizeBtn">Make Resizable</button>

<div class="canvas ui-draggable ui-draggable-handle ui-selectee" id="56cec649-f945-4f7e-87bd-c95abcae95e7_ui-id-2" style="position: absolute; top: 77px; left: 242px;">
    <div style="padding: 5px; border-radius: 7px; cursor: default;" class="elementContainer ui-selectee">
        <label class="canvas-span ui-resizable-autohide ui-resizable ui-selectee" id="label_56cec649-f945-4f7e-87bd-c95abcae95e7_ui-id-2">Click here to change
            <div class="ui-resizable-handle ui-resizable-e ui-selectee" style="z-index: 90; display: none;"></div>
            <div class="ui-resizable-handle ui-resizable-s ui-selectee" style="z-index: 90; display: none;"></div>
            <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-selectee" style="z-index: 90; display: none;"></div>
        </label>
        <input style="width: 200px; 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" />
    </div>
</div>

JS：

$('#resizeBtn').click(function() {
    $("#input_56cec649-f945-4f7e-87bd-c95abcae95e7_ui-id-2").resizable();
});

CSS：

/*** reset style from bootstrap***/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*****Custome style *****/
.canvas {
  margin-top: 10px;
  display: inline-block;
}

这是以上代码的链接示例：http://jsfiddle.net/73amaegf/1/

Answer 1

您需要为可调整大小的输入元素设置最小高度 - 添加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" />

要保留完全相同的尺寸，您可能还想添加min-width。

修改

通常如果你想镜像动态大小调整，你必须在jQuery中做一些事情，如：

$('#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();
});

但是，在这种情况下，将以下内容添加到CSS：

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

诀窍。

Answer 2

好的，我Upadte你的jsfiddle

<强> CSS

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

<强> DEMO HERE

Answer 3

你需要给出最小高度：30px;输入框。但请记住，输入的一个东西的高度应小于30px。 find fiddle demo

 <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;
}

使用box-sizing的jQuery UI Reizable大小调整问题：border-box

3 个答案:

修改