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

I have a JQuery UI dialog popup that displays a form. By selecting certain options on the form new options will appear in the form causing it to grow taller. This can lead to a scenario where the main page has a scrollbar and the JQuery UI dialog has a scrollbar. This two-scrollbar scenario is unsightly and confusing for the user.

我有一个JQuery UI对话框弹出，显示一个表单。通过选择表单上的某些选项，新的选项将出现在表单中，从而使表单变得更高。这可能导致出现这样的场景:主页有一个滚动条，JQuery UI对话框有一个滚动条。这个双滚动条场景对用户来说很不雅观，也很混乱。

How can I make the JQuery UI dialog grow (and possibly shrink) to always fit its contents without showing a scrollbar? I would prefer that only a scrollbar on the main page is visible.

如何使JQuery UI对话框增长(并可能收缩)以始终满足其内容而不显示滚动条?我希望主页上只有一个滚动条是可见的。

7 个解决方案

#1

129

Update: As of jQuery UI 1.8, the working solution (as mentioned in the second comment) is to use:

更新:jQuery UI 1.8的工作解决方案(如第二条评论所述)是:

width: 'auto'

Use the autoResize:true option. I'll illustrate:

使用autoResize:真正的选择。我将说明:

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

Here's a working example: http://jsbin.com/ubowa

这里有一个工作示例:http://jsbin.com/ubowa

#2

The answer is to set the

答案是设置

autoResize:true

property when creating the dialog. In order for this to work you cannot set any height for the dialog. So if you set a fixed height in pixels for the dialog in its creator method or via any style the autoResize property will not work.

创建对话框时的属性。为了使它工作，您不能为对话框设置任何高度。因此，如果你设置一个固定的高度，在它的创建者方法或通过任何风格的对话框的对话框中，自动调整的属性将不起作用。

#3

This works with jQuery UI v1.10.3

这适用于jQuery UI v1.10.3

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

#4

I used the following property which works fine for me:

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

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

#5

Height is supported to auto.

高度支持自动。

Width is not!

宽度是不!

To do some sort of auto get the size of the div you are showing and then set the window with.

要自动获取要显示的div的大小，然后设置窗口。

In the C# code..

在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);
    }

#6

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

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

did what i needed it to do for resizing the width of the dialog.

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

#7

If you need it to work in IE7, you can't use the undocumented, buggy, and unsupported {'width':'auto'} option. Instead, add the following to your .dialog():

如果你需要它在IE7中工作，你不能使用无证的、有bug的、不受支持的{'width':'auto'}选项。相反，在.dialog()中添加以下内容:

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

Whether .scrollWidth includes the right-side padding depends on the browser (Firefox differs from Chrome), so you can either add a subjective "good enough" number of pixels to .scrollWidth, or replace it with your own width-calculation function.

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

You might want to include width: 0 among your .dialog() options, since this method will never decrease the width, only increase it.

您可能希望在.dialog()选项中包含宽度:0，因为该方法不会减少宽度，只增加它。

Tested to work in IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35, and Opera 22.

在IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35和Opera 22中测试过。

#1

129