Twitter bootstrap scrollable modal

Question

I'm using twitter bootstrap for a project I am working on.

I have a modal window that has a somewhat longer form in it and I didn't like that when the window got too small the modal didn't scroll (if just disappeared off my page which isn't scrollable).

To fix this I used the following css

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

This works exactly the way I want it to in Chrome (that is, the form is full size when the window is big enough, but as the window shrinks the modal shrinks and becomes scrollable). The problem is that in IE the modal is off the screen. Does anyone have a better solution to this problem?

My example can be found at tinyhousemap.com (click 'Add an Entry to the map' in the navigation window for the modal to appear)

Thanks

I found and been using this solution. It's very slick in how it allows only the bootstrap modal to scroll and not the background content. https://github.com/aroc/Bootstrap-Scroll-Modal — Richard Adleta, Apr 18 '13 at 14:06

score 137 · Answer 1 · edited Jun 03 '15 at 15:41

137

How about the below solution? It worked for me. Try this:

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

Details:

remove overflow-y: auto; or overflow: auto; from .modal class (important)
remove max-height: 400px; from .modal class (important)
Add max-height: 400px; to .modal .modal-body (or what ever, can be 420px or less, but would not go more than 450px)
Add overflow-y: auto; to .modal .modal-body

Done, only body will scroll.

edited Jun 03 '15 at 15:41

william.eyidi

2,315
4
27
39

answered Jun 05 '12 at 22:54

Lijana Saniukaite

1,500
1
9
9

5

I got this far on my own but really wanted it to be as tall as the window permits, rather than lowest common denominator. But specifying `max-height: 80%;` doesn't work, it expands instead of scrolling. Do I have to use resize events to adjust `$(".modal")[0].style.maxHeight` ? – Peter Wone May 26 '14 at 00:35

score 18 · Answer 2 · answered Dec 24 '13 at 18:50

18

I´ve done a tiny solution using only jQuery.

First, you need to put an additional class to your <div class="modal-body"> I called "ativa-scroll", so it becomes something like this:

<div class="modal-body ativa-scroll">

So now just put this piece of code on your page, near your JS loading:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

I works perfectly for me, also in a responsive way! :)

answered Dec 24 '13 at 18:50

Massa

3,670
1
17
16

1

Great solution, but I would change height to max-height – Oleg Mar 26 '15 at 10:51
1

Also, you could use $('.modal').on('show.bs.modal',function(e){}); to trigger the sizing function. This will calculate the height only as needed, not on every resize and load. You just need to check within the event's function if the current modal utilizes the custom scroll height before calculating/applying the css. i.e. var scrollModal = $('.modal-body.modal-scroll',this); if(scrollModal.length) ... – Robert Waddell Feb 28 '16 at 02:13
is this for bootstrap 2 or 3? – spy Mar 03 '17 at 21:06

score 18 · Answer 3 · edited May 23 '17 at 12:18

18

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

This works for Bootstrap 3 without JS code and is responsive.

Source

edited May 23 '17 at 12:18

Community

1
1

answered Aug 08 '16 at 05:45

Guillaume Renoult

967
8
19

is that bootstrap 2 or 3? question was most likely posted for bootstrap 2 – spy Mar 03 '17 at 20:39
@spy this is for bootstrap 3 – Guillaume Renoult Mar 05 '17 at 22:24

score 8 · Answer 4 · answered Sep 11 '13 at 20:59

8

Try and override bootstrap's:

 .modal {
position: fixed;

With:

.modal {
position: absolute;

It worked for me.

answered Sep 11 '13 at 20:59

Dan Baker

1,757
3
21
36

1

It causes alignment issue on IPad – Oleg Nov 25 '13 at 10:16

score 4 · Answer 5 · answered Oct 03 '13 at 21:27

I also added

.modal { position: absolute; }

to the stylesheet to allow the dialog to scroll, but if the user has moved down to the bottom of a long page the modal can end up hidden off the top of the visible area.

I understand this is no longer an issue in bootstrap 3, but looking for a relatively quick fix until we upgrade I ended up with the above plus calling the following before opening the modal

$('.modal').css('top', $(document).scrollTop() + 50);

Seems to be happy in FireFox, Chrome, IE10 8 & 7 (the browsers I had to hand)

score 1 · Answer 6 · edited Jun 20 '20 at 09:12

In case of using .modal {overflow-y: auto;}, would create additional scroll bar on the right of the page, when body is already overflowed.

The work around for this is to remove overflow from the body tag temporarily and set modal overflow-y to auto.

Example:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

score 1 · Answer 7 · answered Aug 20 '16 at 02:37

The problem with @grenoult's CSS solution (which does work, mostly), is that it is fully responsive and on mobile when the keyboard pops up (i.e. when they click in an input in the modal dialog) the screen size changes and the modal dialog's size changes and it can hide the input they just clicked on so they can't see what they are typing.

The better solution for me was to use jquery as follows:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

It isn't responsive to changing the window size, but that doesn't happen that often anyway.

score 1 · Answer 8 · answered Oct 25 '16 at 13:24

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. Then set the overflow-y to auto so it only scrolls when needed.

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

score 1 · Answer 9 · answered Mar 28 '12 at 04:22

1

Your modal is being hidden in firefox, and that is because of the negative margin declaration you have inside your general stylesheet:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Remove the negative margin and everything works just fine.

answered Mar 28 '12 at 04:22

Andres I Perez

75,075
21
157
138

Removing the margin-top improved the modal so that it isn't as far off the screen in IE, but now it is only centered (vertically) on the screen at a specific window size. All other sizes the modal overflows off the top or bottom of the screen. – Dan dot net Mar 28 '12 at 13:03
1

@Dandotnet the modal positions itself 50% from the top of the window automatically, you can overwrite that with something lower like 10%, but if you added a negative value it will just go off the screen like it does in IE. By the way, the same happens in firefox. – Andres I Perez Mar 28 '12 at 13:55

score 0 · Answer 10 · answered Jun 06 '13 at 20:10

0

None of this will work as expected.. The correct way is to change position: fixed to position: absolute for .modal class

answered Jun 06 '13 at 20:10

GravyPlaya

128
2
9

2

what do you base your conclusion on ? – Rafael Herscovici Oct 07 '14 at 06:56

Twitter bootstrap scrollable modal

10 Answers10

Example:

Linked