Skip to content

feat(modal): add support for scrollable dialog content #2535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 12, 2019
Merged

feat(modal): add support for scrollable dialog content #2535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c8b4003
feat(modal): add support for scrollable dialog content
tmorehouse Feb 12, 2019
9174ef4
Update README.md
tmorehouse Feb 12, 2019
d2995c9
Update README.md
tmorehouse Feb 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 40 additions & 1 deletion src/components/modal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,44 @@ breakpoints to avoid horizontal scrollbars on narrower viewports. Valid optional

The `size` prop maps the size to the `.modal-<size>` classes.

## Vertically centering
## Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the
page itself. Try the demo below to see what we mean.

```html
<div>
<b-button v-b-modal.modal-tall>Launch overflowing modal</b-button>

<b-modal id="modal-tall" title="Overflowing Content">
<p class="my-4" v-for="i in 20" :key="i">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</b-modal>
</div>

<!-- b-modal-scroll-overflow.vue -->
```

You can also create a scrollable modal that allows the scrolling of the modal body by setting
the prop `scrollable` to `true`.

```html
<div>
<b-button v-b-modal.modal-scrollable>Launch scrolling modal</b-button>

<b-modal id="modal-scrollable" scrollable title="Scrollable Content">
<p class="my-4" v-for="i in 20" :key="i">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</b-modal>
</div>

<!-- b-modal-scrollable-content.vue -->
```

## Vertically centered modal

Vertically center your modal in the viewport by setting the `centered` prop.

Expand All @@ -295,6 +332,8 @@ Vertically center your modal in the viewport by setting the `centered` prop.
<!-- b-modal-center-vertically.vue -->
```

Feel free to mix vertically `centered` with `scrollable`.

## Using the grid

Utilize the Bootstrap grid system within a modal by nesting `<b-container fluid>` within the
Expand Down
7 changes: 6 additions & 1 deletion src/components/modal/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,10 @@ export default {
type: Boolean,
default: false
},
scrollable: {
type: Boolean,
default: false
},
buttonSize: {
type: String,
default: ''
Expand Down Expand Up @@ -294,7 +298,8 @@ export default {
return [
{
[`modal-${this.size}`]: Boolean(this.size),
'modal-dialog-centered': this.centered
'modal-dialog-centered': this.centered,
'modal-dialog-scrollable': this.scrollable
},
this.dialogClass
]
Expand Down