Footer is not visible when iOS device keypad is up

Ionic Framework ionic-v3
1

Hi Folks,

Have seen the difference on the footer/tabs view on iOS device where it works fine on Android.
When an input is selected on the page, keypad pushes the page up as the focus set to the input field, but on iOS it’s not same.

Screens -

Screenshot_20180108-200638
Screenshot_20180108-200638.png1080×1920 134 KB

On iOS these home and person icon gets hidden behind the keyboard, Please help to make it same as android

2

Are you using the <ion-footer></ion-footer> element? Because that should work on iOS as well.

3

@Kingsanity Yes i am, here is my code -

<ion-footer>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col>
          <button (click)="addContacts(profileInfo.name, profileInfo.phone, profileInfo.code)" [disabled]="!profileForm.valid" ion-button
            icon-left full>
            <ion-icon ios="ios-person-add" md="md-person-add" item-start></ion-icon>
            Add Contact
          </button>
        </ion-col>
        <ion-col>
          <button (click)="dialingFunction(profileInfo.name, profileInfo.phone, profileInfo.code)" [disabled]="!profileForm.valid"
            ion-button icon-left full>
            <ion-icon ios="ios-call" md="md-call" item-start></ion-icon>
            Call
          </button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>
4

Weird, this should behave exactly like you want to on iOS. I can’t spot anything wrong.

Have you done anything to the CSS of the footer?

5

@Kingsanity - exactly weird on iOS. No i have not done any changes. although i tried using simple footer also, doesn’t work.

6

Have you found any solution? I am facing exactly the same issue