75

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?

1
  • 2
    A colleague kindly suggested to look for body {overflow-y:scroll} and replace it with html {overflow: scroll;}. This fixed the problem for us. Apr 29, 2015 at 10:07

17 Answers 17

62

In Bootstrap.css change the background attribute (position) of Modal from fixed to absolute

4
  • @jktress I understand Rasmus's comment, but not your answer. "background attribute"? Surely you don't mean <div background="absolute" I assume you mean style, but even then there is no "fixed" value for the background style, { background-position:fixed } is not valid.
    – AaronLS
    Oct 8, 2013 at 16:05
  • 3
    This actually causes the modal content to be cut off for me. Setting $.support.transition = false instead makes the scrolling work as expected, but then there are no transitions :-/
    – mnoble01
    Jul 9, 2015 at 22:21
  • 4
    This is not a global useful solution. try .modal {overflow-y: scroll} Apr 25, 2016 at 8:23
  • This solution is a problem if your page has scrolling. The modal may be out of view with absolute positioning Jun 5, 2018 at 19:54
48

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

before (bootstrap default) :

.modal {

    overflow-y: auto;
}

after (after you edit it):

.modal {

    overflow-y: scroll;
}
2
  • 1
    They are quite different. The first one uses the auto-value, the second one uses the scroll-value. This fixed for me the issue. Jul 26, 2014 at 5:30
  • 1
    "Before" means which css the .modal class had before editing... The "after" section shows the correct way to override the .modal class. Aug 28, 2016 at 17:37
18

This answer actually has two parts, a UX warning, and an actual solution.

UX Warning

If your modal contains so much that it needs to scroll, ask yourself if you should be using a modal at all. The size of the bootstrap modal by default is a pretty good constraint on how much visual information should fit. Depending on what you're making, you may instead want to opt for a new page or a wizard.

Actual Solution

Is here: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

This solution will also allow you to change the height of .modal and have the .modal-body take up the remaining space with a vertical scrollbar if necessary.

UPDATE

Note that in Bootstrap 3, the modal has been refactored to better handle overflowing content. You'll be able to scroll the modal itself up and down as it flows under the viewport.

4
  • I'm having the same problem, and this doesn't work on mobile devices, as it relies on a pixel height. Sep 10, 2014 at 9:03
  • hmm.. hard to test this answer, as the linked fiddle doesn't use bootstrap at all… this may explain some of the principles at work, but the bootstrap source is so convoluted that I don't think it's so useful without applying the principles to default BS markup.
    – ptim
    Nov 21, 2014 at 4:00
  • This may be out of date for the latest version of bootstrap, but in the case of the fiddle I provided, bootstrap is just the code that goes around this, you shouldn't need to modify anything within bootstrap itself, just the element that contains the content you wish to scroll.
    – Adam Grant
    Mar 17, 2016 at 16:13
  • I could argue that the scrolling modal is a UX design warning. Consider a simple modal that displays a list-group allowing the user to select one of 10 options shown on a mobile in landscape, a nicer solution would be to have the modal-content scroll, though I haven't seen a universal solution that works well on all devices.
    – Brett Ryan
    Jun 24, 2016 at 8:34
7

Set height for modal-body and not for the whole modal to get a perfect scroll on modal overlay. I get it work like this:

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

Here you can set height as per your requirements.

1
  • 2
    Finally, a solution! A note for dynamic modals- height: auto; also works, but modal height is set to auto anyway, so really all you need is the overflow-y: auto;. I also applied it to the .modal instead of selecting a specific one. Extensive testing shows that it has worked on every modal so far. Sep 26, 2015 at 17:32
4

This is how I did it purely with CSS overriding some classes:

.modal {
  height: 60%;

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

Hope it helps you.

1
  • 8
    Please Note: The above is actually Less CSS, not pure CSS.
    – Fizzix
    Sep 4, 2014 at 5:36
4

If I recall correctly, setting overflow:hidden on the body didn't work on all the browsers I was testing for a modal library I built for a mobile site. Specifically, I had trouble with preventing the body from scrolling in addition to the modal scrolling even when I put overflow:hidden on the body.

For my current site, I ended up doing something like this. It basically just stores your current scroll position in addition to setting "overflow" to "hidden" on the page body, then restores the scroll position after the modal closes. There's a condition in there for when another bootstrap modal opens while one is already active. Otherwise, the rest of the code should be self explanatory. Note that if the overflow:hidden on the body doesn't prevent the window from scrolling for a given browser, this at least sets the original scroll location back upon 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, the other option would be to assign a max-height and overflow:auto to .modal-body like so:

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

For this case, you could configure the max-height for different screen sizes and leave the overflow:auto for different screen sizes. You would have to make sure that the modal header, footer, and body don't add up to more than the screen size, though, so I would include that part in your calculations.

0
2

When using Bootstrap modal with skrollr, the modal will become not scrollable.

Problem fixed with stop the touch event from propagating.

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

more details at Add scroll event to the element inside #skrollr-body

1

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

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

I'm having this issue on Mobile Safari on my iPhone6

Bootstrap adds the class .modal-open to the body when a modal is opened.

I've tried to make minimal overrides to Bootstrap 3.2.0, and came up with the following:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

For comparison, I've included the associated Bootstrap styles below.

Selected extract from bootstrap/less/modals.less (don't 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;
}

Mobile Safari version used: 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

2
  • 1
    gah :( this is actually causing the BG to site hard left whilst the modal is open. I'll update with a fix when it's sorted.
    – ptim
    Nov 24, 2014 at 1:05
  • I could no longer reproduce this issue, and wound back this change
    – ptim
    Jan 18, 2016 at 4:09
1

I had the same issue, and found a fix as 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% working.

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

it's works for me

1

In Bootstrap 5, do it with classes: change

<div class="modal-dialog">

to

<div class="modal-dialog modal-dialog-scrollable">

Also, consider adding class modal-dialog-centered .

0

After using all these mentioned solution, i was still not able to scroll using mouse scroll, keyboard up/down button were working for scrolling content.

So i have added below css fixes to make it working

.modal-open {
    overflow: hidden;
}

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

Added pointer-events: auto; to make it mouse scrollable.

0

I was able to overcome this by using the "vh" metric with max-height on the .modal-body element. 70vh looked about right for my uses.

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

Bootstrap will add or remove a css "modal-open" to the <body> tag when we open or close a modal. So if you open multiple modal and then close arbitrary one, the modal-open css will be removed from the body tag.

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

0

In Bootstrap v3.3.7 I needed to add the following to allow horizontal scrolling:

.modal-open {
    overflow: visible;
}
.modal {
    position: absolute;
}
.modal.in {
    display: table !important;
}
-2

Solution 1: You can declare .modal{ overflow-y:auto} or .modal-open .modal{ overflow-y:auto} if you are using below 3v of bootstrap (for upper versions it is already declared).

Bootstrap adds modal-open class to body in order to remove scrollbars in case modal is shown, but does not add any class to html which also can have scrollbars, as a result the scrollbar of html sometimes can be visible too, to remove it you have to set modal show/hide events and add/remove overflow:hidden on html. Here how to do this.

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

Solution 2: As modal has functionality keys, the best way to handle this is to fix height of or even better connect the height of modal with height of the viewport like this -

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

With this method you also do not have to handle body and html scrollbars.

Note 1: Browser support for vh units.

Note 2: As it is proposed above. If you change .modal{position:fixed} to .modal{position:absolute}, but in case page has more height than modal user can scroll too much up and modal will disappear from viewport, this is not good for user experience.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.