使JQueryUI对话框自动增长或缩小以适应其内容

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (34)

我有一个显示表单的JQueryUI对话框。通过选择表单上的某些选项,新选项将出现在表单中,从而使其变得更高。这可能导致一个场景,其中主页有一个滚动条,JQueryUI对话框有一个滚动条。这种双滚动条场景对用户来说是不好看的,也是令人困惑的。

如何使JQueryUI对话框在不显示滚动条的情况下不断增长(可能收缩)以适应其内容?我希望只有主页面上的滚动条是可见的。

提问于
用户回答回答于

从jQueryUI 1.8开始,工作解决方案(如第二个注释中提到的)将使用:

width: 'auto'

使用“自动调整大小:真”选项。我将举例说明:

  <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/ubwa

用户回答回答于

解决方法是将

autoResize:true 

在创建对话框时初始化。为了使此工作,你不能为对话框设置任何高度。因此,如果你为对话框设置了固定高度(以像素为单位),在其创建者方法中或通过任何样式,则autoResize属性将无法工作。

扫码关注云+社区

领取腾讯云代金券