Modal focus on form input scrolls body rather than modal in android

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

https://getbootstrap.com

MIT License

170.53k stars 78.84k forks source link

Modal focus on form input scrolls body rather than modal in android #15160

Closed leecunliffe closed 9 years ago

leecunliffe commented 9 years ago

In Android Chrome browser, open a bootstrap modal that has several form fields, or some text and a form field near the bottom. Click on the last text input field, while it is near the bottom of the browser viewport. The android keyboard pops up. The body of the document (behind the modal) scolls, but the modal itself doesn't scroll - so the input field is hidden behind the keyboard.

In IOS this does not appear to be a problem, and the modal scrolls as it should.

Example (you need to use an android): http://jsbin.com/hoheberomo/2/

leecunliffe commented 9 years ago

updated: http://jsbin.com/hoheberomo/2/

cvrebert commented 9 years ago

Possibly related to #14972 and/or http://getbootstrap.com/getting-started/#support-fixed-position-keyboards

cvrebert commented 9 years ago

Please re-test against Bootstrap v3.3.1.

leecunliffe commented 9 years ago

same issue with 3.3.1: http://jsbin.com/wahorewobi/1/

cvrebert commented 9 years ago

What version of Android?

leecunliffe commented 9 years ago

4.3 also saw it on a friend's newer phone. I'll post that version when I hear back from him.

leecunliffe commented 9 years ago

Also appears on Android 4.4.2. with Chrome 39.0.2171.59 On Nov 27, 2014 11:02 AM, "Chris Rebert" notifications@github.com wrote:

What version of Android?

— Reply to this email directly or view it on GitHub https://github.com/twbs/bootstrap/issues/15160#issuecomment-64822498.

cvrebert commented 9 years ago

@yellow-beard Duplicate of #9667?
What about Chrome on Android 5.x?
I was unable to reproduce with http://jsbin.com/xirofi/5 on my Nexus 10 running Android 5.0.2 and Chrome 40, although that could be due to the screen size. Yes, the keyboard covers the input, but the browser zooms rather than scrolling, and I think I've seen keyboard-covers-the-input problems like that on many sites and even on iOS. The browsers' behavior when they summon their keyboards is mediocre in general.

leecunliffe commented 9 years ago

Yes I think this is a duplicate of #9667 I can reproduce on a nexus 5, with chrome 40.0.2214.109 and Android 5.0.1

mdo commented 9 years ago

Anything to do here?

spyksoftware commented 9 years ago

Bump. Would be great if this could be fixed. We feel it's a very real usability issue.

Tim www.avaza.com On 26/03/2015 3:25 PM, "Mark Otto" notifications@github.com wrote:

Anything to do here?

— Reply to this email directly or view it on GitHub https://github.com/twbs/bootstrap/issues/15160#issuecomment-86336614.

cvrebert commented 9 years ago

@mdo Close as a duplicate, I guess.

mdo commented 9 years ago

Punting as a won't fix in v3.

zires commented 9 years ago

Still got problem in ios8