Android Keyboard pushes div on top of the keyboard when opnened?

Ionic Framework ionic-v3
1

Hello guys my div looks like this:

  <div class="bottomdiv">
    <button ion-button class="create-btn" block clear (click)="createAccount()">No Account yet? &nbsp;<strong> Sign up.</strong></button>
  </div>
 </div>

css:

.create-btn {
   background: rgba(255,255,255,0.1);
   border-radius: 0px !important;
   border-top: 1px solid rgba(255,255,255,0.3);
   color: #FFF;
   margin: 0px !important;
   font-size: 4vw;
   min-height: 13vw;
 }

 .bottomdiv{
  position: fixed;
  bottom: 0;
  width: 100%;
 }

When im opening my keyboard this div always pushes on top of the keyboard.
On ios it stays behind the keyboard. How can i stop that behavior on Android?

2

Did you try any other positions than fixed? Absolute maybe?

3

Yeah i did same behavior. But i dont know what causes this? On ios the Keyboard ignores the Div on Bottom on Android it pushes up with the Keyboard.

4

I think you should look into the styling of the parent elements of the positioned one, as the height of those are probably changing to match with the keyboard. I do feel like changing that could mess up other things in your app, but give it a shot.

5

Didnt work either :frowning:

6

Sloved it by myselfe by adding:
android:windowSoftInputMode="adjustPan"
to my android manifest.

Edit:
I have created a small tutorial for that if some of you guys need the same as i did:

2 Likes
7

I didn’t know what you meant until now, and you just fixed it for me too. Thanks a lot!

If you wanna make it a bit more automatic, I found this on Google:

In your config.xml, preferably under the android platform

<hook type="before_build" src="scripts/android_before_build.js" />
<hook type="before_deploy" src="scripts/android_before_build.js" />
<hook type="before_compile" src="scripts/android_before_build.js" />
<hook type="before_run" src="scripts/android_before_build.js" />

scripts/android_before_build.js

#!/usr/bin/env node

var fs = require('fs');
var path = require('path');

var pathToManifest = path.join(__dirname, '../platforms/android', 'AndroidManifest.xml');

if(fs.existsSync(pathToManifest)) {
    var config = fs.readFileSync(pathToManifest, 'utf8');
    var result = config.replace(/(android:windowSoftInputMode=").*?(")/, '$1adjustPan$2');
    fs.writeFileSync(pathToManifest, result, 'utf8');

    console.log('Set android:windowSoftInputMode to adjustPan');
} else {
    console.log('Could not find AndroidManifest to set android:windowSoftInputMode');
}
2 Likes
8

Im glad im fixed it for you too haha :smiley:
And thanks for the automatic info :slight_smile: