How to enable content scrolling inside a module?

Question

I'm trying to put a lot of text into a modal field created using Twitter Bootstrap, but I have a problem: this content refuses to scroll.

I tried adding overflow:scroll and overflow-y:scroll , but to no avail; it just makes it display the scroll bar without actually turning on the scroll.

What is the reason for this and what can I do?

Answer 1

In Bootstrap.css, change the modal's background ( position ) attribute from fixed to absolute

Answer 2

In Bootstrap 3 you have to change the css .modal class

before (default bootstrap):

 .modal { overflow-y: auto; } 

after (after editing):

 .modal { overflow-y: scroll; } 

Answer 3

There are two parts to this answer: the UX warning and the actual solution .

UX Warning

If your modal contains so much that it needs to scroll, ask yourself if modal should be used at all. The default boot modal file size is a pretty good limit on how much visual information should fit. Depending on what you are doing, you can choose a new page or wizard instead.

Actual solution

Here: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

This solution will also allow you to change the height of .modal and, if necessary .modal-body to take the remaining space using the vertical scrollbar.

UPDATE

Note that in Bootstrap 3, the modal has been reorganized to better handle overflowing content. You can scroll up and down the modal itself when it flows under the viewport.

Answer 4

If I remember correctly, the overflow setting: hidden on the body did not work in all browsers that I tested for the modal library that I created for the mobile site. In particular, I had problems preventing body scrolling in addition to modal scrolling, even when I was overflowing: hidden on the body.

For my current site, I ended up doing something like this. It basically just saves the current scroll position in addition to setting “overflow” to “hidden” on the body of the page, and then restores the scroll position after closing the modal mode. There is a condition where another modal botstrap opens, and one is already active. Otherwise, the rest of the code should be clear. Please note that if overflow: hidden on the body does not prevent the window from scrolling for a given browser, this at least sets the initial scroll location on exit.

 function bindBootstrapModalEvents() { var $body = $('body'), curPos = 0, isOpened = false, isOpenedTwice = false; $body.off('shown.bs.modal hidden.bs.modal', '.modal'); $body.on('shown.bs.modal', '.modal', function () { if (isOpened) { isOpenedTwice = true; } else { isOpened = true; curPos = $(window).scrollTop(); $body.css('overflow', 'hidden'); } }); $body.on('hidden.bs.modal', '.modal', function () { if (!isOpenedTwice) { $(window).scrollTop(curPos); $body.css('overflow', 'visible'); isOpened = false; } isOpenedTwice = false; }); } 

If you don't like this, another option would be to assign max-height and overflow: auto to.modal-body as follows:

 .modal-body { max-height:300px; overflow:auto; } 

In this case, you can adjust the maximum height for different screen sizes and leave overflow: automatically for different screen sizes. You would have to make sure that the modal header, footer and body are not larger than the screen size, so I would include this part in your calculations.

Answer 5

Set the height for the modal-body , not for the whole modal, to get the perfect scroll on the modal overlay. I earned like this:

 .MyModal { height: 450px; overflow-y: auto; } 

Here you can set the height according to your requirements.

Answer 6

Here's how I did it exclusively with CSS, overriding some classes:

 .modal { height: 60%; .modal-body { height: 80%; overflow-y: scroll; } } 

Hope this helps you.

Answer 7

When using Bootstrap modal with skrollr, the modality will not scroll.

Fixed problem with stopping touch events from spreading.

 $('#modalFooter').on('touchstart touchmove touchend', function(e) { e.stopPropagation(); }); 

more information on Add a scroll event to an element inside # skrollr-body

Answer 8

Actually for Bootstrap 3 you also need to override the .modal-open class on the body.

  body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 15px; /*<-- to margin-right: 0px;*/ } 

Answer 9

I have a problem with Mobile Safari on my iPhone6

Bootstrap adds the .modal-open class to the body when opening a modal file.

I tried to make minimal overrides for Bootstrap 3.2.0 and came up with the following:

 .modal-open { position: fixed; } .modal { overflow-y: auto; } 

For comparison, I have included Bootstrap related styles below.

Selected extract from bootstrap / less / modals.less (do not include this in your fix):

 // Kill the scroll on the body .modal-open { overflow: hidden; } // Container that the modal scrolls within .modal { display: none; overflow: hidden; position: fixed; -webkit-overflow-scrolling: touch; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } 

Used version of Mobile Safari: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

Answer 10

I had the same problem and found a fix as shown below:

 $('.yourModalClassOr#ID').on('shown.bs.modal', function (e) { $(' yourModalClassOr#ID ').css("max-height", $(window).height()); $(' yourModalClassOr#ID ').css("overflow-y", "scroll"); /*Important*/ $(' yourModalClassOr#ID ').modal('handleUpdate'); }); 

100% works.

Answer 11

 .modal-body { max-height: 80vh; overflow-y: scroll; } 

he works for me

Answer 12

After using all of the mentioned solution, I still could not scroll using the mouse scroll, the keyboard up / down button worked to scroll through the contents.

So I added below css fixes to make it work

 .modal-open { overflow: hidden; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; **pointer-events: auto;** } 

Event pointer added : auto; to make it scrollable.

Answer 13

Bootstrap will add or remove the css "modal-open" tag to the <body> when opening or closing a modal file. Therefore, if you open several modal, and then closed arbitrary, modally open css will be removed from the body tag.

But the scroll effect depends on the attribute "overflow-y: auto;" defined in modal-open

Answer 14

I managed to overcome this using the "vh" metric with max-height on the .modal-body element. 70vh looked at me correctly.

 .modal-body { overflow-y: auto; max-height: 70vh; } 

Answer 15

Solution 1 You can declare .modal{ overflow-y:auto} or .modal-open .modal{ overflow-y:auto} if you use below 3v bootstrap (this is already announced for higher versions).

Bootstrap adds the modal-open class to the body to remove the scrollbars in case the modal is shown, but does not add any class to the html that can also have scrollbars, as a result, the html scrollbar can sometimes also be seen to remove him, you need to install modal shows / hide events and add / remove overflow:hidden in html . Here's how to do it.

 $('.modal').on('hidden.bs.modal', function () { $('html').css('overflow','auto'); }).on('shown.bs.modal', function () { $('html').css('overflow','hidden'); }); 

---

Solution 2 Since modals have function keys, the best way to deal with this is to set the height or even better combine the height of the modal with the height of the viewport like this -

 .modal-body { overflow:auto; max-height: 65vh; } 

With this method, you also won’t have to handle the body and html scrollbars.

Note 1 : browser support for vh units.

Note 2 : as suggested above . If you change .modal{position:fixed} to .modal{position:absolute} , but if the page has a higher height than the modal user, you can scroll too much and the modality disappears from the viewport, it’s not very convenient for users.