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

Question

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

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

Answer 1

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

Answer 2

答案是设置

autoResize:true 

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

Answer 3

这适用于jQuery UI v1.10.3

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

Answer 4

我使用以下属性对我来说很好:

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