使 JQuery UI Dialog 自动增长或缩小以适应其内容

Posted 2023-03-06

【中文标题】使 JQuery UI Dialog 自动增长或缩小以适应其内容

【英文标题】：Make JQuery UI Dialog automatically grow or shrink to fit its contents

【发布时间】：2010-10-19 20:54:25

【问题描述】：

我有一个显示表单的 JQuery UI 对话框弹出窗口。通过选择表单上的某些选项，新选项将出现在表单中，使其变得更高。这可能会导致主页面有滚动条而 JQuery UI 对话框有滚动条的情况。这种两个滚动条的场景既难看又让用户感到困惑。

如何使 JQuery UI 对话框增长（并可能缩小）以始终适应其内容而不显示滚动条？我希望只有主页上的滚动条可见。

【问题讨论】：

我建议发布代码示例，如果没有看到对话框的结构，很难推荐解决方案。

【参考方案1】：

答案是设置

autoResize:true 

创建对话框时的属性。为了使它起作用，您不能为对话框设置任何高度。因此，如果您在其创建者方法中或通过任何样式为对话框设置固定高度（以像素为单位），则 autoResize 属性将不起作用。

【讨论】：

太棒了 :) 但是为什么 jQuery 没有把它放在他们的文档中呢？！。无论如何谢谢你。

小心，不适用于触发插件定位（at、my、off 等）

【参考方案2】：

更新：从 jQuery UI 1.8 开始，有效的解决方案（如第二条评论中所述）是使用：

width: 'auto'

---

使用 autoResize:true 选项。我会举例说明：

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() 
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      , 1000);
   </script>

这是一个工作示例： http://jsbin.com/ubowa

【讨论】：

嗯.. 将不得不扩展我的FrameDialog ...它本质上是一种创建用于对话框的 iframed 内容的方法.. 它并不完美，但对于我的项目来说效果很好需要它。

这对我不起作用。相反，我将选项“宽度”设置为“自动”。

+1 到评论——它对我有用，而且这个例子也适用，所以我不得不想象这没有改变，但是嘿，如果一切都失败了，试一试.

这不适用于宽度，它只适用于我认为的高度。

这个答案对 1.8.4 版本不再有效，而是使用 height auto forum.jquery.com/topic/dialog-auto-width

【参考方案3】：

var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

做了我需要做的事情来调整对话框的宽度。

【参考方案4】：

高度支持自动。

宽度不是！

要做某种自动获取您正在显示的 div 的大小，然后设置窗口。

在 C# 代码中..

TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    

【参考方案5】：

我使用了以下适合我的属性：

$('#selector').dialog(
     minHeight: 'auto'
);

【讨论】：

在 jquery ui 1.12 中工作

【参考方案6】：

这适用于 jQuery UI v1.10.3

$("selector").dialog(height:'auto', width:'auto');

【讨论】：

也为我工作 (v1.11.1)。

【参考方案7】：

如果您需要它在 IE7 中工作，则不能使用 undocumented, buggy, and unsupported 'width':'auto' 选项。相反，请将以下内容添加到您的 .dialog()：

'open': function() $(this).dialog('option', 'width', this.scrollWidth) 

.scrollWidth 是否包含右侧填充取决于浏览器（Firefox 与 Chrome 不同），因此您可以向.scrollWidth 添加主观“足够好”的像素数，或者将其替换为您自己的宽度-计算函数。

您可能希望在您的.dialog() 选项中包含width: 0，因为这种方法永远不会减小宽度，只会增加它。

经测试可在 IE7、IE8、IE9、IE10、IE11、Firefox 30、Chrome 35 和 Opera 22 中运行。