Centering angular loading modal vertically
How can I center this modal vertically regardless of the size of the displayed content. On my page, I am showing an image as a modal and I would like it to be displayed in the center of the screen. I can align it horizontally, but I cannot get it to interact vertically. Any ideas / examples of this being done?
I followed this example on my page: demo plunger for modal window
but my actual modal content looks like this:
<script type="text/ng-template" id="myModalContent.html">
<div>
<img class= "attachmentImage" src={{items}} />
</div>
</script>
Should I be looking for changes in bootstrap.min.css
or ui-bootstrap-tpls-0.13.0.js
or is this the best way to approach this with my styles in my sheet.
Thanks a lot for your time. Let me know if you need more information or if I don't know.
source to share
I strongly disagree with 1Bladesforhire's answer because the top of the container modal
becomes inaccessible when it is higher than the height of the viewport. This is a common problem when centering taller children than parents using the vertical centering method absolute
.
My preferred method for vertically centering a Bootstrap modality
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
While vertically centered, when the viewport width is smaller, it .modal-content
remains fully accessible, even if it has a height 300vh
:
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
.modal-content {
height: 300vh;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
source to share