Modal scrolling #407

Closed
vahtel opened this Issue Oct 10, 2011 · 31 comments

Projects

None yet
@vahtel
vahtel commented Oct 10, 2011

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

@fat
Member
fat commented Oct 11, 2011

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

@fat fat closed this Oct 11, 2011
@vreon
vreon commented Oct 11, 2011

@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.

@fat
Member
fat commented Oct 11, 2011

Just change the position from fixed to absolute.

@tstouf
tstouf commented Nov 9, 2011

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.

@fat
Member
fat commented Nov 9, 2011

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

@bubbltrubl

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

For example:

{
 max-height: 500px;
 overflow-y: scroll;
}

@JoyceBabu

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.

@muratcorlu

I solved this problem like that:

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

Hope solve yours' too.

@paglias
paglias commented Jan 16, 2012

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.

@aroc
aroc commented Mar 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

@vreon
vreon commented Mar 29, 2012

Nice work Eric, that's exactly what I'm looking for. 👍

@aroc
aroc commented Mar 29, 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.

@ahoward
ahoward commented Jun 22, 2012

+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;
}
@lookfirst

@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.

@aroc
aroc commented Aug 1, 2012

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

@lookfirst

@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.

@aroc
aroc commented Aug 2, 2012

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

@lookfirst

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.

@lookfirst

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.

@pristinenoise pristinenoise referenced this issue in projectblacklight/blacklight Oct 15, 2012
Closed

Short windows cause problems with bootstrap modal plugin #440

@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?

@yiziz
yiziz commented Dec 5, 2012

@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?

@tvb
tvb commented Feb 4, 2013

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

@keviano
keviano commented Feb 6, 2013

@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.

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

Modals are not fully accesible in mobile #388

@grex22
grex22 commented Jun 18, 2013

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

@cvrebert
Member

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

@mozzi
mozzi commented Jun 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);
    });
});
@alexanmtz

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 :/

@AlfioEmanueleFresta AlfioEmanueleFresta referenced this issue in CroceRossaCatania/gaia Jul 23, 2013
Closed

Pagine fuori scala #237

@brian-lamb-software-engineer

@bubbltrubl your awesome, that was my missing link for ipads. i wasnt going to use the "TRELLO like" scrolling, but i had to, when i did this, it wasnt until i set the max height that i was FINALLY able to scroll up and down, and i also i was breaking my vertical scroll without the overflow-y: scroll; as well.

i did this in Javascript, so it would be responsive
var viewportHeight = $(window).height(); $('.modal-body').css('height',viewportHeight);

@cvrebert cvrebert locked and limited conversation to collaborators Jun 9, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.