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

发布于04月19日

我有一个显示表单的JQuery UI对话框弹出窗口.通过在表格上 Select 某些选项，新选项将出现在表格中，使其变得更高.这可能导致主页有一个滚动条，而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.

推荐答案

Update:从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>

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