jQuery 使用jquery UI对话框，是否有最大高度并使用“自动”，如果它较小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5661913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
with jquery UI dialog, is there anyway to have a max height and use 'auto' if its smaller
提问by leora
I want a dialog to have a max height setting but, if the content is smaller, then to shrink down to do what height = 'auto'does. Is this possible in JQuery UI dialog?
我希望对话框具有最大高度设置，但是，如果内容较小，则缩小以执行height = 'auto'操作。这在 JQuery UI 对话框中可行吗？
回答by mekwall
You can achieve this by doing the following:
您可以通过执行以下操作来实现此目的：
HTML
HTML
<div id="dialog" title="Dialog Title">
Dialog content
</div>
JavaScript
JavaScript
$('#dialog').dialog({
resizable: false,
minHeight: 0,
create: function() {
$(this).css("maxHeight", 400);
}
});
Check out test case on jsFiddle.
回答by clime
I use this:
我用这个：
$('#dialog').dialog({
maxHeight: $(window).height(),
open: function() {
$(this).dialog('option', 'maxHeight', $(window).height());
}
});
Resetting maxHeight in "open" is useful when window has changed size.
当窗口改变大小时，在“打开”中重置 maxHeight 很有用。
回答by pivotal developer
You can do it like this:
你可以这样做：
$('#testing').resizable("enable");
$('#testing').dialog({ maxHeight: 400 });
<div id="testing" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
回答by Roger
After dialog .open(), and filling with .html():
对话后.open()，并填写.html()：
$("#div").css('max-height','500px');
回答by anmarti
I think you could work together with heightand maxHeightand fit the dialog height when your div content height < dialog maxheight. Do this when the dialog is open. Like this:
我认为当您的 div 内容高度 < 对话框 maxheight 时，您可以与height和一起工作maxHeight并适合对话框高度。当对话框为 时执行此操作open。像这样：
<div id="dialog">
<div id="contents">
<input type="text" style="height:3000px"
</div>
</div>
$('#dialog').dialog({
autoOpen: false,
maxHeight:400,
height:400,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
},
open:function(){
var s = $('#contents').height();
var s2 = $(this).dialog( "option", "maxHeight" );
if(s < s2){
$(this).height(s);
}
}
});
try it changing the style="height:3000pxvalue:
http://jsbin.com/iwecuf/2/edit
尝试更改style="height:3000px值：http:
//jsbin.com/iwecuf/2/edit
回答by Jonathon Hill
回答by blairzotron
You can wrap the dialog contents in another div that has max-height applied, like this:
您可以将对话框内容包装在另一个应用了 max-height 的 div 中，如下所示：
<div id="dialog">
<div style="max-height: 400px;">
POPUP CONTENTS GO HERE
</div>
</div>
回答by David
Let me throw my 2 cents in.
让我投入我的 2 美分。
Create a CSS Style like so
像这样创建一个 CSS 样式
.d-maxheight { max-height:200px; }
Now simply tell the dialog to apply that class to the dialog
现在只需告诉对话框将该类应用到对话框
$(document).ready(function(){
$(d).dialog({
dialogClass: 'd-maxheight',
height:400
});
});
As long as you content is less than the max height it will automatically size. If not the max height will take effect and you will get a scroll bar inside the dialog.
只要您的内容小于最大高度，它就会自动调整大小。如果不是，最大高度将生效，您将在对话框内看到一个滚动条。
