CODEWITHSUNDEEP
androidcordova
Yuan Fen
Yuan Fen

Reputation: 153

Phonegap keyboard cover input field

I am very new in Android apps development and i'm encountering issue with keyboard covering my input fields and I did a search and came to know that I need to add in

android:configChanges="screenSize|locale"

to the xml file. However I do not have the AndroidManifest.xml in my directory. All I have is config.xml which phonegap provided me.

Then I found this https://github.com/phonegap/build/issues/160 but I have no idea where to put this

android:windowSoftInputMode="value1|value2|valueN"

in my config.xml?

Any help is appreciated Thanks in adavance

Upvotes: 4

Views: 13689

Answers (7)

user5801286
user5801286

Reputation: 21

With

<preference name="fullscreen" value="true" />

I needed to do the following two

a. Use https://github.com/madebycm/AndroidBug5497Workaround/blob/master/AndroidBug5497Workaround.java to ensure that cordova / phonegap can see a change in window height

b. Add the code below to js. This step is required depending upon how the html is written

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady () {
    document.addEventListener('hidekeyboard', onKeyboardHide, false);
    document.addEventListener('showkeyboard', onKeyboardShow, false);
}

function onKeyboardHide() {
    console.log('onKeyboardHide');
}

function onKeyboardShow(e) {
  console.log('onKeyboardShow');
  setTimeout(function() {
    e.target.activeElement.scrollIntoViewIfNeeded()
  }, 500) //needed timeout to wait for viewport to resize
}

Upvotes: 2

Fedir RYKHTIK
Fedir RYKHTIK

Reputation: 9974

Only one solution which worked for my full-screen app, it's to add to the Cordova application ionic-plugin-keyboard plugin

cordova plugin add com.ionic.keyboard

JS code :

// This event fires when the keyboard will hide
window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    $("body").addClass("keyboardOn");
}

// This event fires when the keyboard will show
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    $("body").removeClass("keyboardOn");
}

After that You could adjust the view with CSS.

ref.: https://stackoverflow.com/a/25823491/634275

Upvotes: 0

timmy_kamps
timmy_kamps

Reputation: 21

I solved this problem using css media queries. 

@media (max-height: 600px) {
  .login-header i {
    display: none;
  }
}

The keyboard resizes the screen and the css above consequently hides 'login-header' when the screen size falls below an arbitrary value (e.g. 600px). This allows the hidden input to come into view.

Upvotes: 2

Alex from Jitbit
Alex from Jitbit

Reputation: 60566

Tried the accepted answer from @markj but it didn't work for me. What DID work was adding this to my config.xml:

<preference name="fullscreen" value="false" />

You do get the "status bar" on top of your app but thats ok with me... Hope that helps

Upvotes: 8

markj
markj

Reputation: 137

Why not just use the PhoneGap Build website and upload a zip file? And forget about the manifest file that Amit is talking about. I think he's just making everything more confusing. You need to understand the difference between a local development build and a PhoneGap online build. If you just want to test your app, you don't need to have the local development environment. You can zip your www folder and upload it to the PhoneGap Build service. No command line stuff and no complicated setup. If you want to edit soft keyboard settings, you can edit your config.xml and insert the following:

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" />

... or whatever options you want for the windowSoftInputMode.

The documentation is here:

https://build.phonegap.com/docs/config-xml#platform

http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

Good luck with it.

Upvotes: 3

Amit Prajapati
Amit Prajapati

Reputation: 14315

Your AndroidMainFest location : Projectname -> Platform -> android -> AndroidMainFest.xml Your apk location : Project->bin->projectname.apk

set android:windowSoftInputMode="stateVisible|adjustResize" . . . >

Upvotes: 0

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

You have the manifest file in plaforms/android Go ahead and add your option

phonegap run android will add an android build of your phonegap project to the platforms directory, read on http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide

Upvotes: 0

Related Questions