Sticky footer input box hidden on iOS keyboard show

ionic-v1
1

I’m developing a messaging feature where we need the message input box to be sticky at the bottom of the screen with the content scrolling behind it. However when clicking in the input box on iOS, the keyboard covers the input box. On Android the content resizes correctly to show the input box above the keyboard. The structure looks something like this:

<ion-view>
  <ion-content>
  </ion-content>
  <div>
    <textarea></textarea>
  </div>
</ion-view>

I’ve tried placing the textarea inside the ion-content but position: fixed or position: absolute causes the textarea to show up at the top of the content instead of at the bottom and doesn’t float over the content like I need it to.

2

Can you try by adding this in the meta tag

<meta name="viewport" content="initial-scale=1, minimum-scale=1, 
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
3

Had everything except the height=device-height already in there, and adding that didn’t make a difference.

4

Have you checked the Ionic Keyboard documentation. It has some important pointers you might need to get this fixed.
http://ionicframework.com/docs/api/page/keyboard/

image
image.png1223×569 66.1 KB