Javascript Jquery 对话框高度和垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10565119/
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
Jquery dialog height and vertical scrollbar
提问by JonoB
I am returning data via ajax to populate a jquery dialog. The ajax is basically an html table with a variable amount of rows.
我正在通过 ajax 返回数据以填充 jquery 对话框。ajax 基本上是一个带有可变行数的 html 表。
I'd like the dialog to expand to show the rows, up to a certain vertical size (350px), at which point it should show a vertical scrollbar.
我希望对话框展开以显示行，达到一定的垂直大小（350 像素），此时它应该显示一个垂直滚动条。
So, this seems to work fine - the dialog resizes correctly depending on the number of rows. But, I never get the vertical scrollbar - so if I have 20 rows, then I only get to see the last 9.
所以，这似乎工作正常 - 对话框根据行数正确调整大小。但是，我从来没有得到垂直滚动条——所以如果我有 20 行，那么我只能看到最后 9 行。
How do I force the vertical scrollbar if the height would have been more than 350px?
如果高度超过 350 像素，如何强制垂直滚动条？
$.ajax({
type: 'POST',
url: 'myurl',
data: postdata,
dataType: 'json',
success: function (result) {
if (result.success && result.data) {
var $dialog = $('<div></div>').html(result.data).dialog({
autoOpen: false,
title: 'History',
modal: true,
height: Math.min((result.rows * 25) + 150, 350),
width: 800
});
$dialog.dialog('open');
}
event.preventDefault();
}
});
回答by Eugene Trofimenko
You should add css property overflow:autofor content div.
您应该overflow:auto为内容 div添加 css 属性。
$("<div></div>").css({height:"350px", overflow:"auto"});
If you need ONLY vertical scroll overflow-y:autoand overflow-x:hidden
如果您只需要垂直滚动overflow-y:auto和overflow-x:hidden
回答by yeahman
use css max-height: 350px; and overflow:auto; .. should be fine
使用 css 最大高度：350px；和溢出：自动；.. 应该没事
回答by Robert
I know this is kind of old but none of these worked for me. Here is what is working as of jQuery UI 1.10.
我知道这有点旧，但这些都不适合我。这是 jQuery UI 1.10 的工作原理。
$("#helptext").dialog({
title: 'Blog Help',
autoOpen: false,
width: '90%',
height: ($(window).height() - 200),
modal: true
});
Adjust Height and width as you like. I have allot of text in my dialog and didn't want to scroll the whole page.
根据需要调整高度和宽度。我的对话框中有很多文本，不想滚动整个页面。
回答by chronikum
For me worked:
对我来说工作：
.jconfirm-holder {
overflow-y: auto;
}
回答by Carlos Júlio
I didn't want to give a fixed px height so I found a solution giving the model the following css rules.
我不想给出固定的 px 高度，所以我找到了一个解决方案，为模型提供以下 css 规则。
.modal {
display: inline-block !important;
max-height: 90%;
overflow: auto;/* Or scroll, depending on your needs*/}
I hope it works for you.
我希望这个对你有用。
