Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatic scroll on Input focus in Modals doesn't work on Android Chrome #17338

Closed
Domtaholic opened this issue Aug 26, 2015 · 14 comments
Closed

Comments

@Domtaholic
Copy link

Hi,

we got a couple of longer modals with forms. When you focus a input the browser automatically scrolls to a position where you can see the input and the keyboard.

That works on the Nexus 6 like a charm on our normal inputs, but on the inputs inside a modal it doesn´t do anything on the first focus when the keyboard gets visible.

Any suggestions?

Cheers

@kkirsche
Copy link
Contributor

Per CONTRIBUTING.md, bug reports should include an isolated example of the problem with instructions (as necessary) for us to reproduce the problem. The following can be used as a template on JSBin if that would be helpful.

Thanks for your understanding and cooperation!

@cvrebert
Copy link
Collaborator

What version of Android and what version of Chrome?

@Domtaholic
Copy link
Author

Thx for the reply,

i updated the jsbin:

http://jsbin.com/juguvuwexi

Now if you focus one of the inputs the browser scrolls to a position where the keyboard is below the input field so you can see it while you typing.

Now open the Modal and try the same, on the Nexus that doesn´t work as expected.

Android Version: 5.1.0
Chrome: 40.0.2214.89

@Domtaholic
Copy link
Author

Is there any news about this? Can you confirm the issue?

@cvrebert
Copy link
Collaborator

cvrebert commented Sep 2, 2015

@twbs/team Anyone have an Android device to test this with?
That said, we're kinda at the mercy of the browser here. Besides filing a Chrome bug, I'm uncertain there's much we'll be able to do much here that wouldn't either be super-hacky or necessitate a complete rework of our modals.

@cvrebert cvrebert changed the title Automatic scroll on Input focus in Modals doesn´t work on Android Chrome Automatic scroll on Input focus in Modals doesn't work on Android Chrome Oct 13, 2015
@cvrebert cvrebert self-assigned this Oct 13, 2015
@cvrebert
Copy link
Collaborator

Forked for permissions reasons: http://output.jsbin.com/milofi/1

@twbs-lmvtfy
Copy link

Hi @cvrebert!

You appear to have posted a live example (http://jsbin.com/milofi/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 24, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 27, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 30, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 33, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 36, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 39, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 42, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 45, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 48, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 51, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 54, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 56, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 59, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 62, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 65, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 68, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 71, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 90, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 93, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 96, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 99, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 102, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 105, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 108, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 111, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 114, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 117, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 120, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 122, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 125, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 128, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 131, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 134, column 14: E013: Only columns (.col-*-*) may be children of .rows
  • line 137, column 14: E013: Only columns (.col-*-*) may be children of .rows

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert
Copy link
Collaborator

With those row errors fixed: http://output.jsbin.com/yihawi

@cvrebert
Copy link
Collaborator

Confirmed in Chrome 49.0.2623.91 on Android 5.1.1.

@cvrebert cvrebert removed their assignment Mar 16, 2016
@cvrebert
Copy link
Collaborator

Tried making the scrollable layer taller to see if that would allow Chrome to scroll: http://output.jsbin.com/kirevu/quiet
But it had no effect on the scrolling when tapping the last <input>.

@cvrebert cvrebert added this to the v3.3.7 milestone Mar 16, 2016
@cvrebert
Copy link
Collaborator

cvrebert added a commit that referenced this issue Mar 16, 2016
cvrebert added a commit that referenced this issue Mar 16, 2016
Add Wall of Browser Bugs entry for #17338
[ci skip]
@mingyu717
Copy link

could I know if there is any Work-around of this issue?

@fariazz
Copy link

fariazz commented Mar 9, 2018

Does anyone know how to fix or work around this?

@Herst
Copy link
Contributor

Herst commented Sep 1, 2018

Issue is assumed to be fixed since Chrome 67 (see the last comments in the filed Chrome bug).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants