Skip to content
This repository

Modals in 2.0 are broken on mobile. #3230

Closed
ATSiem opened this Issue April 25, 2012 · 22 comments
Adam Siemiginowski

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

David Mosher

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

Dan

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.

David Mosher

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

Dan

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

Luis Cielak

Anyone having luck with a workaround for this issue?

Thanks!

Chris Ferdinandi

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.

Chris Ferdinandi

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;
}

Luis Cielak

Thanks @cferdinandi this fixed it for me as well.

Cheers!

David Mosher

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

Chris Ferdinandi

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

Chris Ferdinandi

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

Loki Meyburg

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

Hugh Rawlinson

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

Chris Ferdinandi

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.

Hugh Rawlinson

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

Richard Pickett

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

Chris Ferdinandi

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

Adam Conrad

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
witwit commented June 26, 2012

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

Alex Nguyen

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

Mark Otto
Owner
mdo commented July 06, 2012

Closing as dupe of #2130.

Mark Otto mdo closed this July 06, 2012
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.