Menu
I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap, but I'm having a problem: that content refuses to scroll.
I tried adding overflow:scroll and overflow-y:scroll, but to no avail; that merely causes it to display a scroll bar without actually enabling the scrolling.
What's the cause behind that and what can I do?
236
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
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.
You need to use 'overflow = scroll' for modal style. Below is example code to get scrollable material-ui modal. withStyles is used to apply style for modal in this example.
In Bootstrap.css change the background attribute (position) of Modal from fixed to absolute
126
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
