Modals in 2.0 are broken on mobile. #3230

Closed
adamsiem opened this Issue Apr 25, 2012 · 22 comments

Comments

Projects
None yet
@adamsiem

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: twitter#1036

@arenowebdev

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev Apr 25, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@djbowen

djbowen Apr 26, 2012

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.

djbowen commented Apr 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev Apr 27, 2012

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

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

@djbowen

This comment has been minimized.

Show comment
Hide comment
@djbowen

djbowen Apr 28, 2012

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

djbowen commented Apr 28, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@luiscielak

luiscielak May 8, 2012

Anyone having luck with a workaround for this issue?

Thanks!

Anyone having luck with a workaround for this issue?

Thanks!

@cferdinandi

This comment has been minimized.

Show comment
Hide comment
@cferdinandi

cferdinandi May 10, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@cferdinandi

cferdinandi May 10, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@luiscielak

luiscielak May 10, 2012

Thanks @cferdinandi this fixed it for me as well.

Cheers!

Thanks @cferdinandi this fixed it for me as well.

Cheers!

@arenowebdev

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev May 14, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@cferdinandi

cferdinandi May 14, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@arenowebdev

arenowebdev May 14, 2012

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

Good luck! 👍

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

Good luck! 👍

@cferdinandi

This comment has been minimized.

Show comment
Hide comment
@cferdinandi

cferdinandi May 15, 2012

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

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

@lokimeyburg

This comment has been minimized.

Show comment
Hide comment
@lokimeyburg

lokimeyburg May 17, 2012

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

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

@hughrawlinson

This comment has been minimized.

Show comment
Hide comment
@hughrawlinson

hughrawlinson May 19, 2012

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

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

@cferdinandi

This comment has been minimized.

Show comment
Hide comment
@cferdinandi

cferdinandi May 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@hughrawlinson

hughrawlinson May 20, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@richardp-au

richardp-au May 20, 2012

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

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

@cferdinandi

This comment has been minimized.

Show comment
Hide comment
@cferdinandi

cferdinandi May 21, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@acconrad

acconrad May 30, 2012

Contributor

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.

Contributor

acconrad commented May 30, 2012

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

This comment has been minimized.

Show comment
Hide comment
@witwit

witwit Jun 26, 2012

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

witwit commented Jun 26, 2012

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

@nguyenning

This comment has been minimized.

Show comment
Hide comment
@nguyenning

nguyenning Jul 3, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 7, 2012

Member

Closing as dupe of #2130.

Member

mdo commented Jul 7, 2012

Closing as dupe of #2130.

@mdo mdo closed this Jul 7, 2012

@cvrebert cvrebert locked and limited conversation to collaborators Jul 28, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.