How do I stop scrollbars?
To disable the horizontal scrollbar you enter the overflow-x: hidden in the CSS. To force a scrollbar when one is not provided use overflow-y: scroll . This can stop the browser jumping when it adds a scrollbar as content expands to exceed the space.
How do you scroll on a modal?
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. Adding on to Carlos Calla’s great answer.
How to put scroll bar only for modal-body?
For Bootstrap versions >= 4.3 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.
What should the size of a modal window be?
A modal window should not be too big or too small, you want it juuuuust right. The goal is to keep context, therefore a modal should not take up the whole screen view. Content should fit the modal. If a scrollbar is needed, you may consider creating a new page instead.
What are the best practices for modal windows?
Add in elements like the device keyboard and nested scrollbars; users are left pinching and zooming trying to catch the fields of a modal window. There are better alternatives for modals and shouldn’t be used on mobile devices. When creating modals remember to add in keyboard accessibility. Consider the following:
What should I remember when creating a modal?
When creating modals remember to add in keyboard accessibility. Consider the following: Opening modal — The element which triggers the dialog must be keyboard accessible Moving focus into the Dialog — Once the modal window is open, the keyboard focus needs to be moved to the top of that