jquery-ui对话框自动高度问题
Posted
技术标签:
【中文标题】jquery-ui对话框自动高度问题【英文标题】：Issue with jquery-ui dialog auto height 【发布时间】：2018-06-17 21:33:12 【问题描述】：我在调整 jquery-ui 对话框高度时遇到问题。我使用的是 1.10.3 版。 我的对话框初始化如下所示：
$('#dlgOnlineChange').dialog(
autoResize: true,
autoOpen: false,
modal: true,
width: '800',
height: 'auto',
resizable: false,
title: "Details"
);
对话框打开时，高度设置为自动，但对话框不够高，无法显示所有数据。在加载所有数据之前不会打开对话框，所以我不确定为什么会这样。 如果我尝试硬编码这样的高度：
$('#dlgOnlineChange').dialog(
autoOpen: false,
modal: true,
width: '800',
height: '900',
resizable: false,
title: "Details"
);
对话框足够高，但它仍然显示滚动条，但只显示在对话框的顶部：
我的模态标记如下所示：
<div id="dlgOnlineChange" title="" style="display: none;">
<div class="modal-body">
@using (html.BeginForm("UpdateOnlineChange", "Contact", FormMethod.Post, new area = "Admin", id = "frmDlgOnlineChange", @role = "form" ))
<div class="form-horizontal">
<div class="row">
<div class="col-md-8">
<div class="col-md-2">
<b>ID</b><br />
<div id="divId"></div>
</div>
<div class="col-md-3">
<b>NAME</b><br /><div id="divAName"></div>
</div>
<div class="col-md-3">
<b>EFFECTIVE DATE</b><br /><div id="divEffectiveDate"> </div>
</div>
<div class="col-md-4">
<b>SUBMITTED DATE</b><br /><div id="divDateSubmitted"></div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="row currentinfo">
<div class="row">CURRENT INFORMATION</div>
<div class="row">
HOME ADDRESS:<br /><div id="divCurrentHomeAddress"></div>
</div>
<div class="row">
OFFICE ADDRESS:<br /><div id="divCurrentOfficeAddress"></div>
</div>
<div class="row">
MAILING ADDRESS:<br /><div id="divCurrentMailingAddress"></div>
</div>
<div class="row">
PUBLIC ADDRESS:<br /><div id="divCurrentPublicAddress"></div>
</div>
<div class="row">
PHONE(S):<br />
<div class="row">
Home: <span id="divCurrentHomePhone"></span>
</div>
<div class="row">
Office: <span id="divCurrentOfficePhone"></span>
</div>
<div class="row">
Mobile: <span id="divCurrentMobilePhone"></span>
</div>
<div class="row">
Fax: <span id="divCurrentFax"></span>
</div>
<div class="row">
Other: <span id="divCurrentOtherPhone"></span>
</div>
</div>
<div class="row">
EMAIL ADDRESS(ES):<br />
<div class="row">
Primary: <span id="divCurrentPrimaryEmail"></span>
</div>
<div class="row">
Secondary: <span id="divCurrentSecondaryEmail"></span>
</div>
<div class="row">
Other: <span id="divCurrentOtherEmail"></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row submittedInfo">
<div class="row">SUBMITTED INFORMATION</div>
<div class="row">
HOME ADDRESS:<br /><div id="divSubmittedHomeAddress"></div>
</div>
<div class="row">
OFFICE ADDRESS:<br /><div id="divSubmittedOfficeAddress"></div>
</div>
<div class="row">
MAILING ADDRESS:<br /><div id="divSubmittedMailingAddress"></div>
</div>
<div class="row">
PUBLIC ADDRESS:<br /><div id="divSubmittedPublicAddress"></div>
</div>
<div class="row">
PHONE(S):<br />
<div class="row">
Home: <span id="divSubmittedHomePhone"></span>
</div>
<div class="row">
Office: <span id="divSubmittedOfficePhone"></span>
</div>
<div class="row">
Mobile: <span id="divSubmittedMobilePhone"></span>
</div>
<div class="row">
Fax: <span id="divSubmittedFaxPhone"></span>
</div>
<div class="row">
Other: <span id="divSubmittedOtherPhone"></span>
</div>
</div>
<div class="row">
EMAIL ADDRESS(ES):<br />
<div class="row">
Primary: <span id="divSubmittedPrimaryEmail"></span><br />
</div>
<div class="row">
Secondary: <span id="divSubmittedSecondaryEmail"></span><br />
</div>
<div class="row">
Other: <span id="divSubmittedOtherEmail"></span><br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
有人可以帮我弄清楚这里发生了什么吗？
【问题讨论】：
【参考方案1】：您可以改为获取窗口高度：
$('#dlgOnlineChange').dialog(
autoResize: true,
autoOpen: false,
modal: true,
width: '800',
height: window.innerHeight,
resizable: false,
title: "Details");
【讨论】：
这与我将其硬编码为 height: 900 时的作用相同，就像我帖子中的图像一样。它为对话框提供了更高的高度，但内容不会扩展到滚动条停止的位置 这里真正的问题是模态体上设置了最大高度。 .modal-body 最大高度：900px;溢出：自动； overflow-x:hidden; 增加这个最大高度解决了我的问题 太棒了！我希望它现在已经修复了。【参考方案2】：我在对话框初始化中添加了位置，现在它的大小正确。我还删除了高度。对话框初始化现在看起来像这样：
$('#dlgOnlineChange').dialog(
autoOpen: false,
modal: true,
width: '800',
resizable: false,
title: "Details",
position: [($(window).width() / 2), 150]
);
我不知道为什么会这样，但我现在就去做。如果有更好的解决方案，我绝对愿意接受。
【讨论】：
其实这行不通。对话框刚刚滚动到底部，我认为一切都合适，但没有注意到顶部的数据没有显示以上是关于jquery-ui对话框自动高度问题的主要内容，如果未能解决你的问题，请参考以下文章