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

Comments

Projects
None yet
7 participants
@Domtaholic
Copy link

Domtaholic commented Aug 26, 2015

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

This comment has been minimized.

Copy link
Contributor

kkirsche commented Aug 26, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Aug 26, 2015

What version of Android and what version of Chrome?

@Domtaholic

This comment has been minimized.

Copy link
Author

Domtaholic commented Aug 27, 2015

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

This comment has been minimized.

Copy link
Author

Domtaholic commented Sep 2, 2015

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

@cvrebert

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 16, 2016

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

@twbs-lmvtfy

This comment has been minimized.

Copy link

twbs-lmvtfy commented Mar 16, 2016

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

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 16, 2016

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

@cvrebert cvrebert added the confirmed label Mar 16, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 16, 2016

Confirmed in Chrome 49.0.2623.91 on Android 5.1.1.

@cvrebert cvrebert removed their assignment Mar 16, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 16, 2016

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

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 16, 2016

cvrebert added a commit that referenced this issue Mar 16, 2016

cvrebert added a commit that referenced this issue Mar 16, 2016

Merge pull request #19551 from twbs/crbug-595210
Add Wall of Browser Bugs entry for #17338
[ci skip]

@cvrebert cvrebert closed this in 10606a7 Mar 16, 2016

@mingyu717

This comment has been minimized.

Copy link

mingyu717 commented Oct 24, 2017

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

@fariazz

This comment has been minimized.

Copy link

fariazz commented Mar 9, 2018

Does anyone know how to fix or work around this?

@Herst

This comment has been minimized.

Copy link
Member

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
You can’t perform that action at this time.