blocks|key|1581021|text|答案是将|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1581022|autoResize:true+|code-block|syntax|javascript|1581023|属性来创建对话框。为了使其正常工作，您不能为对话框设置任何高度。因此，如果在对话框的创建者方法中或通过任何样式设置固定的高度(以像素为单位)，则autoResize属性将不起作用。|1581024|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|$]]

The answer is to set the 

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

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.

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

$("#dialog").dialog('option',+'width',+(w+*+10));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1365978|做了我需要它做的事情来调整对话框的宽度。|unstyled|1365979|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>

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

blocks|key|1581196|text|支持将Height设置为auto。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1581197|宽度不是！|1581198|要执行某种自动操作，请获取所显示的div的大小，然后使用设置窗口。|1581199|在C#代码中..|1581200|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|1581201|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|$]]

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.

In the C# code..

<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|1366169|text|我使用了以下属性，它对我来说很好用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1366170|$('#selector').dialog({
+++++minHeight:+'auto'
});|code-block|syntax|javascript|1366171|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|$]]

I used the following property which works fine for me:

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

blocks|key|1366215|text|这适用于jQuery+UI+v1.10.3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1366216|$("selector").dialog({height:'auto',+width:'auto'});|code-block|syntax|javascript|1366217|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|$]]

This works with jQuery UI v1.10.3

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

blocks|key|1581498|text|如果您需要在IE7中使用它，则不能使用undocumented,+buggy,+and+unsupported+{'width':'auto'}选项。相反，请将以下内容添加到.dialog()中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1581499|'open':+function(){+$(this).dialog('option',+'width',+this.scrollWidth)+}|code-block|syntax|javascript|1581500|.scrollWidth是否包含右侧填充取决于浏览器(火狐和Chrome不同)，所以你可以给.scrollWidth添加一个主观的“足够好”的像素数，或者用你自己的宽度计算函数来代替它。|1581501|您可能希望在.dialog()选项中包含width:+0，因为此方法永远不会减小宽度，而只会增加宽度。|1581502|经测试可在IE7、IE8、IE9、IE10、IE11、Firefox30、Chrome35和Opera22上运行。|1581503|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]]]]

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

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

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.

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.

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

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.

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

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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