diff options
| author | Andres Galante <[email protected]> | 2017-11-24 19:28:58 -0300 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-11-24 14:28:58 -0800 |
| commit | b29e3f2a4c4cf105363ca4153841d0c8e8de3941 (patch) | |
| tree | 80b62e4eb2c73cc3159352e00e37fa4bc0a7c1a3 | |
| parent | 4829350a461f05774149469e8bb2d818351d0c4e (diff) | |
| download | bootstrap-b29e3f2a4c4cf105363ca4153841d0c8e8de3941.tar.xz bootstrap-b29e3f2a4c4cf105363ca4153841d0c8e8de3941.zip | |
lets the centered modal have any height (#24803)
| -rw-r--r-- | docs/4.0/components/modal.md | 2 | ||||
| -rw-r--r-- | scss/_modal.scss | 7 |
2 files changed, 3 insertions, 6 deletions
diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index 214ed0116..5a6e000e9 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -210,7 +210,7 @@ When modals become too long for the user's viewport or device, they scroll indep ### 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 class="modal-dialog modal-dialog-centered" role="document"> diff --git a/scss/_modal.scss b/scss/_modal.scss index bd4abc7c6..edda83663 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -53,9 +53,7 @@ .modal-dialog-centered { display: flex; align-items: center; - height: 100%; - margin-top: 0; - margin-bottom: 0; + min-height: calc(100% - (#{$modal-dialog-margin} * 2)); } // Actual modal @@ -154,8 +152,7 @@ } .modal-dialog-centered { - margin-top: 0; - margin-bottom: 0; + min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2)); } .modal-content { |