Menu
I'm using Bootstrap v3.0.2. Want to disable background scrolling when a modal is open. I tried:
.modal-open {
overflow: hidden;
}
But it isn't working. I found a solution to this problem is:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
But position: fixed; causing an extra white-space at the bottom of the page in chrome(less than 100% view) and also for large displays(in 100% view) while opening and closing the modal. How to get rid of it? (My modal contains scroll-able fields)
815
Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element.
Disabling scroll with only CSS There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
Approach: To prevent body scrolling but allow overlay scrolling we have to switch the overflow to be hidden when the overlay is being shown. And while the whole page's overflow is hidden or the scroll is disabled the overflow in the y-axis of the overlay is enabled and the overflow can be scrolled.
Use height: 100% to make the .modal-open fit the whole screen.
Eventually use
top: 0;
left: 0;
right: 0;
bottom: 0;
incase anyone having this still, just use
.modal-open {
overflow: hidden !important;
}
EDIT: have no idea why its de-voted but this is what fixed my issue regarding the scrolling.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
