Float footer above keyboard in a modal

Ionic Framework Ionic Angular
1

Having trouble floating a div/footer/anything above keyboard. They keyboard just lays over the footer but I want it on top. I’m suspecting it is the modal??

My structure is like so:
-ion-app
– ion-content
– ion-modal
----ion-content
----ion-footer

For ion-footer styles (as well as div), I’ve tried
position:absolute; bottom: 0px;
position:sticky;

Also tried placing the footer inside the modal content. Any other ideas?

1 Like
2

If it is the system keyboard then I wonder if you can place anything over it all

Then u likely need to rethink your ui

3

Sorry but do you mean the modal then would be the problem? Since you mentioned rethink UI.

Most of the searched that I came across was their footer is above the keyboard and needed a solution to keep it over the keyboard. Exact opposite what I’m looking for.

4

Your expect this ?

Screenshot_1612566412
Screenshot_16125664121080×2160 104 KB

Screenshot_1612566521
Screenshot_16125665211080×2160 32.6 KB

1 Like
5

Yes that. That’s what I’m looking for.

6

I am using Ionic 4/5,
the code is this

<ion-header>
  <ion-toolbar color="primary">
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
    <ion-item>
      <ion-label>Input</ion-label>
      <ion-input></ion-input>
    </ion-item>
  </div>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-button expand="block" shape="round">
      ADD
    </ion-button>
    <ion-button expand="block" shape="round">
      REMOVE
    </ion-button>
  </ion-toolbar>
</ion-footer>
7

Yeah but try it in a modal. Does it work?

8

Look up KeyboardResizeMode here - Keyboard | Ionic Documentation

That’s your issue.

  • KeyboardResizeMode (String, ‘native’ by default). Possible values:
    • native : The whole native webview will be resized when the keyboard shows/hides, it will affect the vh relative unit.
    • body : Only the html <body> element will be resized. Relative units are not affected, because the viewport does not change.
    • ionic : Only the html ion-app element will be resized. Only for ionic apps.