Modals in 2.0 are broken on mobile.

[ATSiem]

When you use a button to present a modal on mobile, the screen turns black, and only does the modal appear after some crafty scrolling and zooming. This is not apparent to a new user.

Any fixes?

More discussion on the problem here: #1036

[arenowebdev]

I've also experienced this issue (as I mentioned in the linked issue #1036 [thought it was still open when I commented]) in version 2.0.3 on an Android device. Haven't found a workaround yet, but am working on it...

[djbowen]

I found that changing the .modal { position:absolute; } css to position:fixed (in bootstrap-responsive.css) fixed the problem for me on Android 4, although I need to check it on more mobile browsers to be certain.

[arenowebdev]

Just tried @djbowen's code and got worse results. Any one know how to get modals to work on a mobile phone?!?! :) Thanks!

[djbowen]

@underparnv - well that's no good! :) what version of Android are you using? I've been fighting with mobile modals for a little while now ... provided I size the modal correctly and use position:fixed, it seems to be functioning OK in iOS 5 (iPhone & iPad) and Android 4.0.2 (Samsung Galaxy Nexus).

[luiscielak]

Anyone having luck with a workaround for this issue?

Thanks!

[cferdinandi]

This had been driving me nuts for over a month now. I finally figured out a fix tonight.

In the bootstrap-responsive.css file, make the following changes:

1. Switch the .modal position from absolute to fixed. This prevents the modal from floating up to the top of the page out of view. I also changed the positioning from pixels to percentages, and needed to add a bottom position for this to work. (Technically, you can delete the positioning value altogether, as it's already defined as fixed in the main css file.)

   .modal {
   position: fixed;
   top: 3%;
   right: 3%;
   left: 3%;
   bottom: 3%;
   width: auto;
   margin: 0;
   }

2. Unfortunately, this also breaks overflow scrolling on iOS. Fortunately, there's an easy solution that I just discovered. Add a line of css for the modal-body class giving it -webkit-overflow-scrolling: touch. It turns out that overflow on the iPad doesn't work so well either, so you should add this to the main css file, NOT just the responsive file. In the responsive file, you also need to add a modal-body height, otherwise the modal-footer may get pushed out of view.

BOOTSTRAP.CSS
.modal-body { -webkit-overflow-scrolling: touch; }

BOOTSTRAP-RESPONSIVE.CSS
.modal-body { height: 60%; }

This fixed it for me. I'll be interested to see if anyone else has similarly positive results.

[cferdinandi]

After playing around a bit more, I've got a better version of the CSS down. Here's what I've done...

In the responsive CSS file:

1. Changed the positioning from absolute to fixed (or really, deleted the positioning variable altogether, as the main CSS file already specifies the positioning as fixed).
2. Changed the top, left and right positions from pixels to percentages.
3. Added a bottom position. This is required to keep the modal-footer from expanding beyond the screen on modals with long blocks of text. Because of the fixed positioning, it will never be visible in those instances.
4. Added a body height of 60%. This also prevents the modal-footer from being pushed out of view on longer blocks of text, and enables overflow-y scrolling.

.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
bottom: 3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}

In the main CSS file:

1. Added -webkit-overflow-scrolling: touch to the modal-body. Without this, scrolling moves the background and NOT the modal on iOS devices (including the iPad).

.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

[luiscielak]

Thanks @cferdinandi this fixed it for me as well.

Cheers!

[arenowebdev]

Putting this into production today as it appears to have fixed the issue. Should maybe put it in a pull request though? Thanks @cferdinandi!!!

[cferdinandi]

David,

Forgive me, but I'm a complete novice with GitHub. In fact, I signed up just to reply to this thread. How might I submit a pull request?

Thanks,
Chris

[arenowebdev]

@cferdinandi This is your best bet: http://help.github.com/send-pull-requests/

Good luck! 👍

[cferdinandi]

@fat - Any chance you could incorporate this fix into the next rev of Bootstrap?

[lokimeyburg]

It works for me too, but I had to remove the '.fade' class from my modal window.

[hughrawlinson]

there's also a problem with long words in h1 tags in mobile as well...

[cferdinandi]

Hugh, if you add line-height: 1; to the header tags, it fixes the issue. WIth the default settings, the line-height is too small and the words smush together. I added that to the regular CSS, but you can add it to the responsive only if you're so inclined.

[hughrawlinson]

Cfernandi, thanks, but that didn't help. The words aren't smushing together, it's just one of the words is too long and overflows the right of the screen. I guess I'll just have to get a shorter surname :P

[richardp-au]

Override the size of h1 elements in your own responsive CSS?

[cferdinandi]

Ahh, gotcha! I would second what @R1ch0 noted. I find that H1 and H2 tags are often too large on mobile screens (not just in Bootstrap, but many themes).

[acconrad]

Having a variant of this issue on Mobile and Tablet.

• On Android the scroll portion will not work (Android 2.3.4 default browser)
• On mobile and tablet, if the modal is positioned above anchor tags, the device has trouble discerning which link it should click. For example, if the close x on the modal is positioned over a link, the device will sometimes click the x button, and sometimes it will click the link behind the modal. I want the modal to always take priority in clicks.

I tried implementing @cferdinandi 's fix and it helped a bit on tablet but doesn't full solve everything. Any further suggestions would be great.

[witwit]

@cferdinandi solution works for now for my web app on iPhones. Thanks!

[nguyenning]

I have the same issue but incorporated my own fix as of version v2.0.4:

/* fix modal position for 480px devices */
@media (max-width: 480px) 
{
    .modal.fade.in {
        top: 10px;
  }
}

place this after you include bootstrap.css

[mdo]

Closing as dupe of #2130.