rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

lets the centered modal have any height (#24803)

Browse Source
This commit is contained in:
Andres Galante 2017-11-24 19:28:58 -03:00 committed by Mark Otto
parent 4829350a46
commit b29e3f2a4c
2 changed files with 3 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/4.0/components/modal.md
View File

@ -210,7 +210,7 @@ When modals become too long for the user's viewport or device, they scroll indep
### Vertically centered ### Vertically centered
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal. Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">

7
scss/_modal.scss
View File

@ -53,9 +53,7 @@
.modal-dialog-centered { .modal-dialog-centered {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; min-height: calc(100% - (#{$modal-dialog-margin} * 2));
margin-top: 0;
margin-bottom: 0;
} }
// Actual modal // Actual modal
@ -154,8 +152,7 @@
} }
.modal-dialog-centered { .modal-dialog-centered {
margin-top: 0; min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
margin-bottom: 0;
} }
.modal-content { .modal-content {