Ionic-framework: Android soft keyboard hides the input field in bottom screen

Created on 6 Apr 2016 · 21Comments · Source: ionic-team/ionic-framework

* Ionic v2 *

Android soft keyboard hides the input filed in the bottom of the screen. Need to scroll to bottom manually. But when I commented the app.bundle.js like below, It works fine and last input field automatically pulled up when I focus it.

<body>

  <!-- this Ionic's root component and where the app will load -->
  <!--<ion-app></ion-app>-->

  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>
  <div style="height:40px"><input type="text"/></div>

  <script src="cordova.js"></script>
  <!--<script src="build/js/app.bundle.js"></script>-->
</body>

Source

TheMohanraj

👍4

Most helpful comment

I can confirm the issue. When an input get focused, the keyboard shows up and hide a part of the view. If your input is part of it, the user will have to scroll to it as you can see:

ionic_bug_input

The best behavior should be like natives app do, i.e. move the entire page like that:

ionic_normal_keyboard_behavior

JumBay on 10 May 2016

👍6

All 21 comments

Hello! Thanks for opening an issue with us! So, I'm a little confused on your issue. If you comment out that app.bundle.js script then your Ionic app isn't going to work at all, as that JavaScript file has all your components and everything built into it, so when you loaded your app it would just be a blank white screen. By chance, would you be able to provide a codepen that I can use to repro the issue? That would be easier because then I would be able to see the issue with my own eyes. Thanks again!

jgw96 on 6 Apr 2016

Actually real issue is, I add a html <textarea> inside <ion-content> in my template, which is in the bottom of all.
When I tap into the textareafrom android browser, the keyboard hides the textarea which is not the default behavior of android chrome. When I build the same page with raw html and javascript, page pops up as expected.
It seems issue with ionic library.

TheMohanraj on 6 Apr 2016

Can you use ion-textarea instead? Additionally, all of ionic's markup should be within templates that ng2 will insert into ion-app. So there shouldn't be any HTML written outside of ion-app in the index.html file.

adamdbradley on 6 Apr 2016

Forget about the above snippet.

<ion-textarea> also making no difference, still element was positioned in the bottom. I opted <textarea> instead of <ion-textarea> because of this issue (https://github.com/driftyco/ionic/issues/6052)

TheMohanraj on 7 Apr 2016

Hello @dheran ! Are you still having this issue? If so can your provide a plunker that i can use to reproduce this issue with please? Thanks!

jgw96 on 9 May 2016

I can confirm the issue. When an input get focused, the keyboard shows up and hide a part of the view. If your input is part of it, the user will have to scroll to it as you can see:

ionic_bug_input

The best behavior should be like natives app do, i.e. move the entire page like that:

ionic_normal_keyboard_behavior

JumBay on 10 May 2016

👍6

+1
This issue is bothering us too :(

@jgw96 the GIF is clear IMO and I can confirm ("needs reply" tag)

matheo on 4 Jun 2016

👍1

+1
Seeing the same issue on Moto G2 Android 6.0 device. Tried different things (see my forum post) but no luck.
Virtual keyboard seems a bugging issue on both ios and Android.

mpaland on 10 Jun 2016

👍1

Greetings @dheran!

My sensors indicate a reply was requested, but as we have not received one yet, I am using my robot powers to close this issue. However, if you are still experiencing this issue, please feel free to reopen it by creating a new issue, and include any examples or necessary information.

Thank you for allowing me to assist you.

Ionitron on 10 Jun 2016

Greetings @dheran!

Thank you for allowing me to assist you.

Ionitron on 10 Jun 2016

Hello all! Closing this as a duplicate of https://github.com/driftyco/ionic/issues/5432. Thanks for using Ionic!

jgw96 on 9 Aug 2016

Still facing this issue in Ionic 3.7 (Android) as defined in animated gif by @JumBay was there a solution for it?

ghost on 5 Oct 2017

I am having the same issue on android. @ghost

ATakaSKY on 25 Oct 2017

I am having the same issue still on Android
ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0

cordova (Cordova CLI) : 7.1.0

ionic/app-scripts : 3.1.0
Cordova Platforms : android 6.3.0 ios 4.5.3
Ionic Framework : ionic-angular 3.9.2

Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
ios-sim : 5.0.13
Node : v6.11.0
npm : 5.5.1
OS : macOS High Sierra
Xcode : Xcode 9.0 Build version 9A235

husnaingoldev on 30 Nov 2017

+1:
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0

hmsoftware on 1 Dec 2017

i m facing same issue. any solution??

teju24 on 15 Dec 2017

i am facing the same issue

kennedymca on 18 Dec 2017

I need virtual keyboard for ionic browser application.Can any one help me.I am using typescript for ionic development.

manikandan07081995 on 23 Feb 2018

For kiosk mode

manikandan07081995 on 23 Feb 2018

+1
ionic: 3.19.1

mat90c on 1 Mar 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.