Making <ion-footer> (or anything) float above keyboard

Ionic Framework ionic-v3
1

I’m having trouble implementing or finding a solution to one of the most common scenarios in mobile apps: How do I make an <ion-footer>/<ion-toolbar> with an input (like in a chat app) or a button to “follow” the keyboard when it’s shown/hidden?

When keyboard is hidden, the footer toolbar would be fixed to the bottom of the screen and not move with the scroll (easy - put everything in <ion-footer>).
When keyboard is shown, it should automatically float right above the keyboard.

Currently <ion-footer> just always stays at the very bottom of the screen, covered by keyboard.

Is there a built-in or a workaround solution for this?

<ion-content>
	<h2 text-center>Just a Test Form</h2>

	<form>
		<ion-item>
			<ion-label stacked>Bill Name</ion-label>
			<ion-input [(ngModel)]="name" name="billName" type="text"></ion-input>
		</ion-item>
		<ion-item>
			<ion-label stacked>Amount</ion-label>
			<ion-input [(ngModel)]="amount" name="billAmount" type="number"></ion-input>
		</ion-item>
		<ion-item>
			<ion-label>Due Date</ion-label>
			<ion-datetime displayFormat="D MMM, YY" name="billDate" pickerFormat="DD MMM YYYY" [(ngModel)]="dueDate"></ion-datetime>
		</ion-item>
	</form>
</ion-content>

<ion-footer>
	<ion-toolbar>
		<button ion-button block (click)="createBill()">
		  Create Bill
		</button>
	</ion-toolbar>
</ion-footer>

Thank you for any help on this!

1 Like
2

We are struggling with this issue right now. We have quite a complex app with various form type entry components. We’d like a consistent UX for iOS and Android. What’s the best way of ensuring a footer never gets hidden by the keyboard (and the field in focus always stays fully visible). Is there a generally accepted best practice here?

3

See: Keyboard-attach in Ionic 2

4

Thanks, that’s quite an old thread. What are you suggesting - the directive ?

5

Yes, it’s an old thread but there was a lot of relevant discussion and links as well.

6

Eveything becomes easy if you use a form in your footer. Adjust have to add some css if you want.