Hello everyone,
Massive fan of Ionic, and this is my first time using it was a web based app as opposed to a hybrid / native build.
I’m super sorry if this has already been covered, I’ve had a scan of the forums and carried out search but can’t see anything about this. There is a reference to listening for keyboard events in the docs but not sure if thats needed here.
The main question I have from this post is:
Does the keyboard automatically push the ion-tabbar and bottom fixed elements up or should I be doing something to make this happen?
Below i’ve outlined the current ui probem.
I have a basic chat window which has the following code:
<ion-header>
<ion-toolbar>
<ion-back-button slot="start"></ion-back-button>
<ion-title *ngIf="conversation">
<span class="name" *ngIf="conversation.my_role === 'Renter'"><strong>{{conversation.owner_name}}</strong></span>
<span class="name" *ngIf="conversation.my_role !== 'Renter'"><strong>{{conversation.renter_name}}</strong></span>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="conversation-container" *ngIf="conversation">
<div class="chat" #chatContainer>
<div class="message" [class.my-message]="message.sender_id === myID" [class.not-my-message]="message.sender_id !== myID" *ngFor="let message of conversation.messages">
<div class="timestamp">{{message.created_at | dateTimeFormatFilter: 'short'}}</div>
<div class="bubble-container">
<span class="bubble">
{{message.content}}
</span>
</div>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<div class="write">
<ion-textarea [autoGrow]="true" placeholder="Enter Messsage..." [(ngModel)]="messageToSend" (keyup.enter)="sendMessage()"></ion-textarea>
<ion-icon name="send-outline" [size]="'large'" (click)="sendMessage()"></ion-icon>
</div>
</ion-footer>
The footer contains the input box for composing the message. The problem I’m having is when clicking this inside safari on IOS, the keyboard isn’t pushing the content up as it does on native build. And so the input is getting hidden and making the whole page scroll, including the tabs which should really also be pushing up.
When you try to scroll the page it does this…
If anyone can offer some words of wisdom to help me find a solution that would be great. And again, if this has been covered, my apologies!