Float footer above keyboard in a modal

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-content
– ion-modal

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

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

1 Like

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

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.

Your expect this ?

1 Like

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

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

  <ion-toolbar color="primary">

    <ion-button expand="block" shape="round">
    <ion-button expand="block" shape="round">

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

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.