Skip to content
This repository

Modal scrolling #407

Closed
vahtel opened this Issue October 10, 2011 · 30 comments
Rene Vahtel

If the modal window contains a lot of text it gets hidden behind the bottom of the page. When I try to scroll only the background gets scrolled. Maybe the modal div should be scrolled instead ?

Modal

Jacob
Owner
fat commented October 10, 2011

yep -- you can do this with css -- just add a max-height/height to your modal

Jacob fat closed this October 10, 2011
Jesse Dubay

@fat That's one option, but it would be awesome if we could scroll the backdrop div that contains the modal. I've seen this pattern before (Facebook?) but I can't find any examples.

Jacob
Owner
fat commented October 11, 2011

Just change the position from fixed to absolute.

Travis

Has anyone found the solution to this? changing position to absolute on model class didn't work. @egomaksab, the trello example is exactly what i want too.

Jacob
Owner

Oh, you'd have to make your modal a parent of the overlay, and give the overlay and overflow. This won't work in bootstrap out of the box, but you should be able to get it working with a little tweaking. Try asking in the mailing list maybe

Bob Van Looveren

You can add a max-height and overflow-y: scroll to the modal-body div

For example:
```#id_of_the_modal .modal-body
{
max-height: 500px;
overflow-y: scroll;
}

Joyce Babu

How about adding position:fixed when the modal height is less than the window height, and position:absolute otherwise?

When adding position absolute, you might want to set top too, else the modal window might appear outside the visible area, if you are at the bottom of a long page.

It would be great if this is added to bootstrap.

Murat Çorlu

I solved this problem like that:

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

Hope solve yours' too.

Matteo Pagliazzi

using this code:

#id_of_the_modal .modal-body
{
max-height: 500px;
overflow-y: scroll;
}

why did i need to use a px height and not a percentage one? (also using a small one it doesn't work, i want the modal body to use all the possible height but not execeding the .modal's one and have the scroll inside it.

Eric Anderson
aroc commented March 28, 2012

Hey everyone, just wanted to say I built this and it's up on Github. It's a modified version of the plugin and the CSS required for any height modals with full page scrolling. https://github.com/aroc/Bootstrap-Scroll-Modal

Jesse Dubay
vreon commented March 28, 2012

Nice work Eric, that's exactly what I'm looking for. :+1:

Eric Anderson
aroc commented March 28, 2012

Thanks Jesse, I'm submitting a pull request tonight, as per @markdotto. This modal will be sweet to have in Bootstrap, as it's especially great for web apps.

ara.t.howard

+1

this very sane default behavior.

Martinomagnifico

Not a programmer, so the following code is probably not 'the way it should be', but it works very well for me. I couldn't get Aroc's code to work with 2.0.4, but I really liked the dynamic approach. So I did use that on the button. I put the js in my document.ready scripts, because I didn't want to mess with the original bootstrap js files.

$('a[data-toggle="modal"]').click(function() {   
// Very likely bad practice. I just want to target clicks on a's for modals.
        if ($(this).attr('data-dynamic')) {    
         // Is there a data-dynamic attribute?
            var dyndiv = $(this).attr('href');  
            // If so, what's the name of the modal it's linking to?
            $(dyndiv).addClass('dynamic').css('top', ($(window).scrollTop() + 50))  
            // Put it 50px below the top.
        }
        else {  
        // If the modal is also requested by a non dynamic button, reset the css to the old values
            var dyndiv = $(this).attr('href');
            $(dyndiv).removeClass('dynamic').css('top', '50%')
        }
}); 

And the following in the CSS (or LESS):

.modal.dynamic {
    position: absolute;
    margin: 0 0 0 -280px;
}

.modal.dynamic .modal-body {
    max-height: none;
}
Jon Stevens

@aroc in your code, why not just extend the existing bs modal and override the specific methods that you need to override? It sure would make it easier to understand what you changed.

Eric Anderson
aroc commented August 01, 2012

@lookfirst Valid point. I'll look into it further. Thanks for the suggestion.

Jon Stevens

@aroc i tried your version and it didn't work for me... i have some form controls in my modal (checkboxes) and as soon as i click on one, the modal goes away. i ended up using @muratcorlu solution above.

Eric Anderson
aroc commented August 02, 2012

@lookfirst Thanks for the heads up, I'll see what the issue is.

Jon Stevens

I've finally gotten to the point where all the hacks in the world aren't going to improve the behavior of these modals. The core issue is that .modal { position: fixed } is terrible. I can see why it was done that way... because it works for most of the cases of modals (they are normally relatively small by design).

Obviously BS is tailoring to this theory, which is fine, but a bit short sighted as it is never fun to run across issues like this in the real world while developing an application. The smallest device screens are always going to be an issue. So, if you really need a long modal that is going to stretch beyond the bottom of the screen, fixed just isn't going to cut it.

From what I can tell with a tiny bit of initial experimentation, the solution to this is to use absolute positioning and then compute all the positioning of the modal within the window. But, in order to do that reliably, the best solution is to pull the class="modal" out of the dom and stick it right after the <body> so that it isn't affected by other relative/absolute positioned parent elements. I wish there was another position that was between fixed and absolute, but didn't consider relatively positioned parents. This, of course, has other consequences... like if you wrote css selectors expecting the modal to stay in one place... also the code gets more complex because it should probably put the modal back when it is hidden.

Anyway, I'm going to need tall modals that scroll the page instead of the body of the modal (and thus don't get cut off), so I'll implement this idea. I'll report back when I'm done.

Jon Stevens

Ok, I got my idea above working and it is so much better. All of the scrolling and positioning working as you'd expect it, no matter what the size of the window is. I'll document it as soon as I go live with it on my website so that I can show off an example of it.

katoptron

@aroc Eric,

great work buddy! Just a small issue I found today... If the modal shows up in a small screen width, the .modal-wrapper

won't be resized correctly. By adding a couple of entries in the bundled CSS file to cover the equivalent responsive states, things get back to normal. This is what worked for me:

@media (max-width: 767px) {

.modal-wrapper {
    position: absolute;
    top: 50px;
    left: 20%;
    z-index: 1050;
    width: 70%;
    margin-left: 0px;
    padding-bottom: 80px;
    overflow: visible;
}

}

@media ( max-width : 480px) {

.modal-wrapper {
    position: absolute;
    top: 50px;
    left: 10%;
    z-index: 1050;
    width: 80%;
    margin-left: 0px;
    padding-bottom: 80px;
    overflow: visible;
}

}

I suggest this dynamic modal should be included in the standard distribution of Bootstrap, as it works very smoothly ( Trello and other apps uses this technique as well).

getvictor

It is not clear from this discussion whether this issue will be fixed in a future version of BS. Currently large Bootstrap modals are unusable on small screens like the iPhone due to the scrolling issue. Even the Bootstrap Live Demo doesn't work if you make your browser window size very small: http://twitter.github.com/bootstrap/javascript.html#modals

Is there another Issue number tracking this?

yz0075

@aroc

Great job on the plugin, I love it. However, there is one thing that bugs me: You have to click on the modal before you can use the escape key to close the modal. In the generic bootstrap modal, you can click to open the modal and escape to close it without clicking on the modal itself.

Could you implement the escape key feature to close the modal without clicking on it first?

Tristan van Bokkem

@aroc, I am unable to get your solution working with 2.2.2. What is changed?

keviano

@tristanvanbokkem I added overflow-y:auto; and max-height:90% to the .modal class in the main bootstrap.css file. Modals with lots of content scroll and seem to work fine on mobile. I'm using BS 2.2.2.

Antonio Tapiador atd referenced this issue in ging/social_stream May 28, 2013
Closed

Modals are not fully accesible in mobile #388

grex22
grex22 commented June 18, 2013

@keviano 's suggestion worked pretty nicely. Just gives the whole modal a scroll-bar.

Chris Rebert
Owner

Bootstrap v3 makes the modals responsive and also fixes modal scrolling, IIRC.

Maxim
mozzi commented June 29, 2013

I solved it for bs2.3.2 on one project in a bit different way:
this style should be included somewhere after bootstrap styles

.modal { position: absolute; } 
.modal-body { max-height: none; }
@media (max-width: 767px) {   
  .modal {
    position: absolute;
  }
}

and a simple js hook - scroll to top of modal window

$(function () {
    $('.modal').on('shown',function () {
        var offset = $(this).offset().top;
        $(window).scrollTop(offset);
    });
});
Alexandre Magno

I'm facing the same problem, but I disagree that Bootstrap should support both cases. This is not implementation issue for me, this is a interface problem: a modal should not be used to hold more content than the window. In this case, you should have a separate page or have a scroll in the context of the modal (in last case). This is a overkill use of a modal Window. I have to find a solution but I suggested to the UX Team in my company to not use it, but I have to use anyway :/

Alfio Emanuele AlfioEmanueleFresta referenced this issue in CroceRossaCatania/gaia July 23, 2013
Closed

Pagine fuori scala #237

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.