使JQuery UI对话框自动增长或缩小以适合其内容

时间:2009-04-16 14:16:41

标签: jquery jquery-ui jquery-ui-dialog

我有一个显示表单的JQuery UI对话框弹出窗口。通过选择表单上的某些选项,新选项将显示在表单中,使其变得更高。这可能导致主页面具有滚动条并且JQuery UI对话框具有滚动条的情况。这个双滚动条场景对于用户来说是难看的并且令人困惑。

如何在不显示滚动条的情况下使JQuery UI对话框增长(并可能缩小)以始终适合其内容?我希望只有主页面上的滚动条可见。

7 个答案:

答案 0 :(得分:135)

更新:从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

答案 1 :(得分:45)

答案是设置

autoResize:true 
创建对话框时的

属性。为此,您无法为对话框设置任何高度。因此,如果您在其创建者方法中为对话框设置固定高度(以像素为单位),或者通过任何样式设置,则autoResize属性将不起作用。

答案 2 :(得分:24)

这适用于jQuery UI v1.10.3

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

答案 3 :(得分:11)

我使用了以下适用于我的属性:

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

答案 4 :(得分:2)

自动支持高度。

宽度不是!

要进行某种自动获取您正在显示的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 :(得分:1)

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

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

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

答案 6 :(得分:1)

如果您需要在IE7中使用它,则无法使用undocumented, buggy, and unsupported {'width':'auto'}选项。而是将以下内容添加到.dialog()

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

.scrollWidth是否包含右侧边距取决于浏览器(Firefox与Chrome不同),因此您可以向.scrollWidth添加一个主观的“足够好”的像素数,或者替换它使用您自己的宽度计算功能。

您可能希望在width: 0选项中加入.dialog(),因为此方法永远不会减小宽度,只会增加宽度。

经测试可在IE7,IE8,IE9,IE10,IE11,Firefox 30,Chrome 35和Opera 22中使用。