Skip to content
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

Jump to bottom

Update _modal.scss #30003

Closed
wants to merge 4 commits into from
Closed

Update _modal.scss #30003

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fd7f777
Update _modal.scss
zizoclimbs Jan 12, 2020
232069c
Merge branch 'master' into patch-1
zizoclimbs Jan 18, 2020
5d2107b
Merge branch 'master' into patch-1
XhmikosR Feb 5, 2020
bbf04dd
Merge branch 'master' into patch-1
zizoclimbs Feb 12, 2020
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
15 changes: 6 additions & 9 deletions scss/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@
.modal-open {
// Kill the scroll on the body
overflow: hidden;

.modal {
overflow-x: hidden;
overflow-y: auto;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dont remove these, because cause scrolling issue, see https://deploy-preview-30003--twbs-bootstrap.netlify.com/docs/4.3/components/modal/#scrolling-long-content and click the firse "Lanch demo modal".

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can fix this by setting the code below on the "modal-body"
.modal-body { overflow-y: auto; max-height: 65vh; }

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or we can extend ".modal-dialog-scrollable" placeholder inside our modal-dialog by default. It won't affect anything.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modal scrolls entirely by default. There are no plans to change this behavior.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But this behavior causes the issue in the video. and what about the vertical centering and IE?

Copy link
Member

@ysds ysds Feb 19, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing L11-14 has nothing to do with the problem in your video.

2- Remove ".modal {overflow-x: hidden;overflow-y: auto;}" it makes the modal content scrollable in mobile browsers if you tried to drag it.

It is a browser bug, see https://getbootstrap.com/docs/4.4/getting-started/browsers-devices/#overflow-and-scrolling

}

// Container that the modal scrolls within
Expand Down Expand Up @@ -80,10 +75,12 @@
min-height: subtract(100%, $modal-dialog-margin * 2);

// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
height: subtract(100vh, $modal-dialog-margin * 2);
content: "";
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
&::before {
display: block; // IE10
height: subtract(100vh, $modal-dialog-margin * 2);
content: "";
}
}

// Ensure `.modal-body` shows scrollbar (IE10/11)
Expand Down