jQuery UI 对话框在拖动后停止自动调整大小

Question

我有一个 jQuery UI 对话框，其中包含一个可以根据用户所做的选择进行扩展的表单：http://i.imgur.com/KsskHBC.png.

例如，如果用户将 "answer type" 更改为数字，内容将添加到对话框（或从中删除）：http://i.imgur.com/qH3gmHP.png.

因此，如果用户打开对话框，做出选择以在不移动对话框的情况下展开对话框，对话框将正常调整大小，如您在上图中所见。但是，如果用户拖动对话框然后做出扩展对话框的选择，它不会自动调整大小：http://i.imgur.com/0YEvD5t.png.

这是我初始化对话框的方式：

var dialogToShow = isDeleteConfirmDialog ? $("#confirmDeleteDialog") : $("#customDialog");

dialogToShow.dialog({
    // autoResize: true, -- does not work neither
    resizable: false,
    title: "My title",
    modal: true,
    width: 'auto',
    height: 'auto',
    draggable: false,
    hide: { effect: 'scale', duration: 400 },
    open: function () {
        $('.ui-widget-overlay').bind('click', function () { dialogToShow.dialog('close'); });
    }
});
dialogToShow.parent().draggable();

我也试过将对话框的位置设置为 absolute，但没有任何改变。

我制作了一个 JSFiddle 以查看是否可以重现我的问题，事实上我能够：https://jsfiddle.net/BishopBarber/61jqhsgt/2/

编辑： 这在最新版本的 IE 中似乎不是问题，因此可能是一个错误

Answer 1

如果把动画去掉，再close/open改一下，相信一定行得通。不理想，但可以解决这个问题。

请注意，如果您将 "hidden" 样式设置为不自动打开，则可以删除它。（参见 fiddle 标记）

修改后的代码：

$(function() {
  var dialogToShow = $("#customDialog");
  dialogToShow.dialog({
    resizable: false,
    title: "Dialog",
    modal: true,
    width: 'auto',
    height: 'auto',
    draggable: false,
    // hide: {
    //    effect: 'scale',
    //    duration: 400
    //  },
    autoOpen: false
  });
  dialogToShow.parent().draggable();
  $(document).on('click', '.ui-widget-overlay', function() {
    dialogToShow.dialog('close');
  });
  $("#openDialogBtn").on("click", function() {
    dialogToShow.dialog("open");
  });
  $("#questionType").change(function() {
    if ($(this)[0].selectedIndex === 1) {
      $("#controlEditor").html($("#loremIpsum").html());
    } else {
      $("#controlEditor").html("");
    }
    dialogToShow.dialog("close").dialog("open");
  });
});

Fiddle更新：https://jsfiddle.net/MarkSchultheiss/61jqhsgt/3/

Answer 2

经过几次测试，我意识到这是 jQuery UI 版本 1.11.2 到 1.11.4 中出现的错误。后续和之前的版本好像没有这个问题。如果您不想更改版本，Mark Schultheiss 提出的解决方法是。

jQuery UI 对话框在拖动后停止自动调整大小

jQuery UI dialog stops resizing automatically after it has been dragged

css

jquery

jquery-ui

jquery-ui-dialog