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


#1

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>


#2

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