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>