0

Facing a strange issue. When I am tapping on any text field to edit, the soft keyboard pops up. But the field remains hidden underneath. But as soon as I type any character from the keyboard, it automatically scrolls up and come to the correct position.[Images attached]

Keyboard appears on focus in the Pin Code field and overlapped it. enter image description here

Screen gets re-positioned as soon as I start typing. I typed "7" enter image description here

my config.xml

 <?xml version='1.0' encoding='utf-8'?>
<widget id="com.appid.something" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Name of the app</name>
    <description>
            Some description
    </description>
    <author email="my email" href="link">
       our team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-sqlite-storage" spec="~2.0.0" />
    <preference name="Orientation" value="portrait" />
    <preference name="fullscreen" value="false" />
    <preference name="android-windowSoftInputMode" value="adjustResize"/>
    <feature name="DatePickerPlugin">
    <param name="android-package" value="com.sharinglabs.cordova.plugin.datepicker.DatePickerPlugin"/>
</feature>
</widget>

My requirement is, it should automatically gets repositioned as soon as it get the focus.

Also, in keyboard open mode, scrolling is not hapening.

Nirmal
  • 1,223
  • 18
  • 32
  • Possible duplicate of [PhoneGap android : keyboard overlaps input field](http://stackoverflow.com/questions/11468842/phonegap-android-keyboard-overlaps-input-field) – t0mm13b May 06 '17 at 07:18
  • @t0mm13b, I don't think, it is the same problem. I tried that fix as well. But not working. You can check in my config.xml in the question – Nirmal May 06 '17 at 07:21
  • Seen [this](http://stackoverflow.com/questions/33585355/cordova-android-android-windowsoftinputmode-adjustpan-not-working) ? Relevant to the question – t0mm13b May 06 '17 at 07:24

1 Answers1

0

Referred to the answer by @Biswas Khayargoli in question

Added the following plugin

cordova plugin add ionic-plugin-keyboard --save

In one of my global js file added the code to handle the native.keyboardshow event

 window.addEventListener('native.keyboardshow', function(e){ 
    setTimeout(function() {
        document.activeElement.scrollIntoViewIfNeeded();
    }, 100);
});
Nirmal
  • 1,223
  • 18
  • 32