Keyboard overlaps on Ion-footer

Ionic Framework Ionic Angular
1

Hello Experts,

I have a textarea in ion-footer and when keyboard open… textarea hide behind keyboard.

Anyone here who can help with this issue?

2

Hi, can you provide a demo app to inspect?

3

@mhartington I can share screenshots…

Screenshot_2020-03-30-22-41-47
Screenshot_2020-03-30-22-41-47540×960 60.5 KB
Screenshot_2020-03-30-22-41-50
Screenshot_2020-03-30-22-41-50540×960 72.6 KB

4

Screenshots do not help. We need code example that we can inspect.

5

@mhartington here is the example code of this page…

<ion-header class="primary-header">
    <ion-toolbar color="secondary">
        <ion-buttons slot="start">
            <ion-back-button defaultHref='/user-wall'></ion-back-button>
        </ion-buttons>
        <ion-title>Story</ion-title>
        <ion-buttons slot="end">
            <ion-button>
                <ion-icon color="light" name="search"></ion-icon>
            </ion-button>
            <ion-button>
                <ion-icon color="light" name="notifications"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content *ngIf="post.type == 'story'">
</ion-content>
<!--POST NEW COMMENT-->
<ion-footer>
    <ion-toolbar color="">
        <ion-row class="ion-align-items-center ion-no-padding">
            <ion-col size="10">
                <textarea autosize maxRows="2" class="message-input" placeholder="write a comment..." [(ngModel)]="commentData.comment"></textarea>
            </ion-col>
            <ion-col size="2">
                <ion-button (click)="postComment();" expand="block" fill="clear" color="primary" class="msg-btn">
                    <ion-icon name="send" slot="icon-only"></ion-icon>
                </ion-button>
            </ion-col>
        </ion-row>
    </ion-toolbar>
</ion-footer>
6

Having the same problem on mobileweb in ios safari

7

Check if you have status bar in full view. I disabled that and it worked fine.