Permalink
Browse files

feat(modal): fix for overflowing centered modal to scroll (#1363)

* feat(modal): Fix to allow centered modal to scroll

Based on changes introduced via twbs/bootstrap#24803

Prevents header from getting cut off when modal overflows.

* Update README.md

remove centered warning
  • Loading branch information...
tmorehouse committed Nov 20, 2017
1 parent 844cd81 commit 3b3ba3287164194260e11a2bbf641e12922e32d0
Showing with 1 addition and 10 deletions.
  1. +0 −7 src/components/modal/README.md
  2. +1 −3 src/components/modal/modal.vue
@@ -288,13 +288,6 @@ Vertically center your modal in the viewport by setting the `centered` prop.
<!-- modal-center-v.vue -->
```
**Warning:** Vertically centered modals are not suited for when the content is tall.
They are best suited when the content is only one or two lines, such as Yes/No or
OK/Cancel confirmation dialogs. When the resultant modal is taller than the viewport,
the modal header (and parts of the top of the modal content) will become inaccessible.
This issue becomes more prevalent on smaller screens.
## Using the grid
Utilize the Bootstrap grid system within a modal by nesting `<b-container fluid>` within
the modal-body. Then, use the normal grid system `<b-row>` (or `<b-form-row>`) and `<b-col>`
@@ -8,9 +8,7 @@
.modal-dialog-centered {
display: flex;
align-items: center;
height: 100%;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: calc(100% - 30px);
}
.modal-dialog-centered .modal-content {
width: 100%;

0 comments on commit 3b3ba32

Please sign in to comment.