Question

使用最新的jQuery 1.11.2和2.1.3，UI 1.11.3（Bootstrap 3.3.2）。非常简单的代码：

<div id="abd">
  111
  <input style="width: 100%;">
</div>
<script type="text/javascript">$(document).ready(
 function(){
  $('#abd').dialog();
 }
);</script>

Certanly，它可以工作，但是每次调整大小后，DIV与INPUT的宽度都会减小。如果我包含bootstrap.css宽度减少34像素，没有它减少1像素。检查：FireFox，IE11。在Chrome中我有额外的问题 - 这个div中有额外的scrool bar。

Answer 1

这是jQuery UI中的一个小优先级错误。两周前它没有修复，但提交了一个解决方案。你可以阅读它here

Answer 2

非常糟糕的jQuery UI 1.11.3错误修复，仅针对UI Dialog进行了测试（我只使用自定义包来使用此组件）。

之前：

_applyChanges: function () {
    var props = {};

    if (this.position.top !== this.prevPosition.top) {
        props.top = this.position.top + "px";
    }
    if (this.position.left !== this.prevPosition.left) {
        props.left = this.position.left + "px";
    }
    if (this.size.width !== this.prevSize.width) {
        props.width = this.size.width + "px";
    }
    if (this.size.height !== this.prevSize.height) {
        props.height = this.size.height + "px";
    }

    this.helper.css(props);

    return props;
},

后：

_applyChanges: function () {
    var props = {};
    if (this.position.top !== this.prevPosition.top) {
        props.top = this.position.top + "px";
    }
    if (this.position.left !== this.prevPosition.left) {
        props.left = this.position.left + "px";
    }
    this.helper.css(props);
    if (this.size.width !== this.prevSize.width) {
        props.width = this.size.width + "px";
        this.helper.width(this.size.width);
    }
    if (this.size.height !== this.prevSize.height) {
        props.height = this.size.height + "px";
        this.helper.height(this.size.height);
    }
    return props;
},

并在调整大小

if (sum && sum >= 0) {
    style[prop] = sum || null;
}

更改为：

if (sum && sum >= 0) {
    if($.inArray(prop,['width','height'])>=0){
        el[prop](sum);
    }else{
        style[prop] = sum || null;
    }
}

Answer 3

一个新的错误修复。我可以使用bootstrap在没有它的情况下在页面中顺利调整大小。
1.删除ui插件（＆＃34; resizable＆＃34;，＆＃34; alsoResize＆＃34;）;
2.将其添加到＆＃34; ui.resizable＆＃34;的_mouseDrag的末尾。小部件
附：那么，我如何写这个问题标题 - 这只是对话框修复。

$('DIV.alj-ui-dialog-content').each(function(){
    el = $(this);
    el.width(
        el.parent().width()
        - parseInt(el.css('paddingLeft'),10) - parseInt(el.css('paddingRight'),10) - 1
    );
    el.height(
        el.parent().innerHeight()
        - parseInt(el.css('paddingTop'),10) - parseInt(el.css('paddingBottom'),10)
        - $(el.parent().children('.alj-ui-dialog-titlebar')[0]).outerHeight()
        - parseInt(el.parent().css('paddingTop'),10) - parseInt(el.parent().css('paddingBottom'),10) - 3
    );
});

jQuery UI对话框调整大小

3 个答案: