Bottom positioned element is lifted together with keyboard on Android

ionic-v1
1

Hello,

I’m trying to put a div at the bottom of ion-view (outside of <ion-content>) but it’s not working on Android - the div is rendered above the keyboard (see screenshot below).

After some debugging I found that the height of ion-view is reduced to available space when keyboard opens, but on iOS it doesn’t.

Here is an example:

<ion-view>
  <ion-content>
    <input type="text" placeholder="type something here...">
  </ion-content>

  <div class="bottom-stuff">Should be under keyboard</div>

  <style>
    input {
      height: 40px;
      width: 200px;
    }

    .bottom-stuff {
      position: absolute;
      bottom: 0;
    }
  </style>
</ion-view>

Screenshot:

image
Screen Shot 2016-12-29 at 10.09.35.png974×873 181 KB

Ionic version: 1.3.1
Ionic info:

Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.2.1 Build version 8C1002
2

Couldn’t it just be inside the ‘ion-content’?

If it’s not at the bottom you can make a script to calculate the screen size and add an offset height to the ‘ion-content’.

3

Hi sergeyz,

You can put the text within ion-content and Use the Css styling to positioned.
Hope this will help!

Happy Holidays! :slight_smile:

Aditya Kumar