Ionic ion-header Shifts Up Out Of View On Footer TextArea Focus

In my chat page when the text area input is selected on iOS the header shifts up and disappears from the view. I had this same issue in Ionic v1 and never resolved it. I figured ionic3 would have had a solution to this though…

Environment Info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node  : v8.9.1
    npm   : 5.6.0 
    OS    : macOS High Sierra
    Xcode : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Image examples:

Simplified Example HTML code:

<ion-header>

  <ion-navbar>
    <ion-title>{{ user1.fname }} {{ user1.lname }}</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <h5 *ngIf="noMsgs" text-center style="color: #666">No Messages</h5>
  <div class="message-wrap">

    <div *ngFor="let msg of (messages | async)"
         class="message"
         [class.left]="msg.user !== user2.key"
         [class.right]="msg.user === user2.key">
      <img *ngIf="msg.user !== user2.key; else user2Profile" class="user-img"
           [src]="user1.profilePic || './assets/imgs/person-avatar.jpg'">
      <ng-template #user2Profile>
        <img class="user-img" [src]="user2.profilePic || './assets/imgs/person-avatar.jpg'">
      </ng-template>
      <div class="msg-detail">
        <div class="msg-info">
          <p *ngIf="msg.user === user2.key; else user1Block">
            {{user2.fname}} - {{msg.timestamp | timeago}}
          </p>
          <ng-template #user1Block><p>{{user1.fname}} {{ user1.lname }} - {{msg.timestamp | timeago}}</p></ng-template>
        </div>
        <div class="msg-content">
          <span class="triangle"></span>
          <p class="line-breaker ">{{msg.text}}</p>
        </div>
      </div>
    </div>

  </div>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-grid class="input-wrap">
      <ion-row>
        <ion-col col-10 padding-left>
          <ion-textarea #chat_input
                        placeholder="Text Input"
                        [(ngModel)]="msgText"
                        (keyup.enter)="sendMsg()">
          </ion-textarea>
        </ion-col>
        <ion-col col-2>
          <button ion-button clear icon-only item-right (click)="sendMsg()">
            <ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
          </button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

1 Like

Have you sorted this out? Running into the same issue myself. I tried replicating in a new / clean app and it works as expected…