[英]How to resize bootstrap modal according to iframe size?
Actually i have an iframe page where i load some data from database in a table so the height of the iframe would be different. 实际上,我有一个iframe页面,在该页面中我从数据库中的表中加载了一些数据,因此iframe的高度会有所不同。
Like now the modal is loading fine the iframe and if it height is bigger than 300px there will be a scroll bar but the issue is when the content is smaller than 300px like you can see on the screen there is a lot of white space. 像现在这样,模态很好地加载了iframe,如果它的高度大于300px,则会出现滚动条,但是问题是,当内容小于300px时,就像您在屏幕上看到的那样,会有很多空白。
So i would be able to remove that whitespace and size the modal according to iframe height by setting a max height where should compare the scrollbars. 因此,我将能够通过设置应该与滚动条进行比较的最大高度来删除空白并根据iframe的高度调整模式的大小。
Here is the modal code: 这是模态代码:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<h5 class="modal-title" id="exampleModalLabel">User update: </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="body" class="modal-body mb-0 p-0">
<div class="embed-responsive z-depth-1-half" style="height: 100%; max-height:300px;">
<iframe id="frame" class="embed-responsive-item" src="user.aspx"></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
Remove height:100% and add 去除高度:100%并添加
#body {
max-height:300px;
overflow-y:scroll;
}
I hope this will work. 我希望这会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.