jQuery UI Reizable 大小问题与 box-sizing :border-box

Question

我对 Jquery UI Resizable with box-sizing: border-box 有疑问。如果删除 box-sizing 它将按预期工作。

1. 点击可调整大小
2. 输入元素将显示错误的大小。

请帮我检查问题。

图片: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

好的，我更新你的 jsfiddle

CSS

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

DEMO HERE