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

问题描述

我有一个显示表单的 JQuery UI 对话框弹出窗口.通过选择表单上的某些选项，新选项将出现在表单中，使其变高.这可能会导致主页有滚动条而 JQuery UI 对话框有滚动条的情况.这种有两个滚动条的场景对用户来说既难看又令人困惑.

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

解决方案

更新: 从 jQuery UI 1.8 开始，工作解决方案(如第二条评论中所述)是使用:

width: 'auto'

使用 autoResize:true 选项.我会举例说明:

 
<div id="inside">你好.</div>
<脚本>$('#whatup').dialog(调整大小"，自动");$('#whatup').dialog();设置超时(功能(){$('#inside').append("你好！
");setTimeout(arguments.callee, 1000);}, 1000);

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

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.

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: As of jQuery UI 1.8, the working solution (as mentioned in the second comment) is to use:

width: 'auto'

---

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

  <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

这篇关于使 JQuery UI Dialog 自动增长或缩小以适应其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！