blocks|key|4681146|text|更新：从jQuery+UI+1.8开始，工作解决方案(如第二条评论中提到的)是使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4681147|width:+'auto'|code-block|syntax|javascript|4681148|4681149|使用autoResize:true选项。我将举例说明：|4681150|++<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>|4681151|下面是一个有效的示例：http://jsbin.com/ubowa|4681152|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ubowa^0|0|3|0|0|0|0|0|B|M|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|14|8|@]|D|@]|E|$]]|$1|N|3|O|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|P|3|Q|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

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

<pre><code>width: 'auto'
</code></pre>

<hr>

<p>Use the autoResize:true option. I'll illustrate:</p>

<pre><code>  &lt;div id="whatup"&gt;
    &lt;div id="inside"&gt;Hi there.&lt;/div&gt;
  &lt;/div&gt;
   &lt;script&gt;
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!&lt;br&gt;");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   &lt;/script&gt;
</code></pre>

<p>Here's a working example:
<a href="http://jsbin.com/ubowa" rel="noreferrer">http://jsbin.com/ubowa</a></p>


blocks|key|3838927|text|答案是将|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3838928|autoResize:true+|code-block|syntax|javascript|3838929|属性来创建对话框。为了使其正常工作，您不能为对话框设置任何高度。因此，如果在对话框的创建者方法中或通过任何样式设置固定的高度(以像素为单位)，则autoResize属性将不起作用。|3838930|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The answer is to set the </p>

<pre><code>autoResize:true 
</code></pre>

<p>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.</p>


blocks|key|3839059|text|这适用于jQuery+UI+v1.10.3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3839060|$("selector").dialog({height:'auto',+width:'auto'});|code-block|syntax|javascript|3839061|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works with jQuery UI v1.10.3</p>

<pre><code>$("selector").dialog({height:'auto', width:'auto'});
</code></pre>


blocks|key|617178|text|我使用了以下属性，它对我来说很好用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|617179|$('#selector').dialog({
+++++minHeight:+'auto'
});|code-block|syntax|javascript|617180|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I used the following property which works fine for me:</p>

<pre><code>$('#selector').dialog({
     minHeight: 'auto'
});
</code></pre>


blocks|key|1175364|text|支持将Height设置为auto。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1175365|宽度不是！|1175366|要执行某种自动操作，请获取所显示的div的大小，然后使用设置窗口。|1175367|在C#代码中..|1175368|TheDiv.Style["width"]+=+"200px";

++++private+void+setWindowSize(int+width,+int+height)
++++{
++++++++string+widthScript+=++++"$('.dialogDiv').dialog('option',+'width',+"++++%2B+++width+++%2B");";
++++++++string+heightScript+=+++"$('.dialogDiv').dialog('option',+'height',+"+++%2B+++height++%2B+");";

++++++++ScriptManager.RegisterStartupScript(this.Page,+this.GetType(),
++++++++++++"scriptDOWINDOWSIZE",
++++++++++++"<script+type='text/javascript'>"
++++++++++++%2B+widthScript
++++++++++++%2B+heightScript+%2B
++++++++++++"</script>",+false);
++++}|code-block|syntax|javascript|1175369|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Height is supported to auto.</p>

<p>Width is not!</p>

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

<p>In the C# code..</p>

<pre><code>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",
            "&lt;script type='text/javascript'&gt;"
            + widthScript
            + heightScript +
            "&lt;/script&gt;", false);
    }
</code></pre>


blocks|key|3839091|text|如果您需要在IE7中使用它，则不能使用undocumented,+buggy,+and+unsupported+{'width':'auto'}选项。相反，请将以下内容添加到.dialog()中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3839092|'open':+function(){+$(this).dialog('option',+'width',+this.scrollWidth)+}|code-block|syntax|javascript|3839093|.scrollWidth是否包含右侧填充取决于浏览器(火狐和Chrome不同)，所以你可以给.scrollWidth添加一个主观的“足够好”的像素数，或者用你自己的宽度计算函数来代替它。|3839094|您可能希望在.dialog()选项中包含width:+0，因为此方法永远不会减小宽度，而只会增加宽度。|3839095|经测试可在IE7、IE8、IE9、IE10、IE11、Firefox30、Chrome35和Opera22上运行。|3839096|entityMap|0|LINK|mutability|MUTABLE|url|http://bugs.jqueryui.com/ticket/4437#comment:9^0|1K|G|2F|9|J|10|0|0|0|0|C|1A|C|0|6|9|K|8|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>If you need it to work in IE7, you can't use the <a href="http://bugs.jqueryui.com/ticket/4437#comment:9" rel="nofollow">undocumented, buggy, and unsupported</a> <code>{'width':'auto'}</code> option. Instead, add the following to your <code>.dialog()</code>:</p>

<pre><code>'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }
</code></pre>

<p>Whether <code>.scrollWidth</code> 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 <code>.scrollWidth</code>, or replace it with your own width-calculation function.</p>

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

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


blocks|key|1168460|text|var+w+=+$('#dialogText').text().length;

$("#dialog").dialog('option',+'width',+(w+*+10));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1168461|做了我需要它做的事情来调整对话框的宽度。|unstyled|1168462|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));
</code></pre>

<p>did what i needed it to do for resizing the width of the dialog.</p>


<p>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.</p>

<p>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.</p>


Make JQuery UI Dialog automatically grow or shrink to fit its contents

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个显示表单的JQuery UI对话框弹出窗口。通过选择窗体上的某些选项，新的选项将出现在窗体中，使窗体变得更高。这可能会导致这样的情况:主页有一个滚动条，而JQuery UI对话框有一个滚动条。这种两个滚动条的场景对用户来说既难看又令人困惑。如何在不显示滚动条的情况下使JQuery UI对话框变大(可能缩小)以始终适合其内容？我希望只有主页面上的滚动条是可见的。

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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