I need to adjust an ion-modal’s position when the keyboard is shown on Android devices because the keyboard overlaps the input(s) on the modal. I’m in Ionic 8, Angular 19, Capacitor 7
I’ve tried the approach in the official docs: Keyboard Guide: Tools to Manage an On-Screen Mobile App Keyboard
I’ve tried Keyboard, window.addEventListener, too.
But when the keyboard opens, I never hit the second console.log.
import { Keyboard } from '@capacitor/keyboard';
private async setupKeyboardListeners() {
console.log('JKY: Setting up keyboard listeners');
this.keyboardShowListener = await Keyboard.addListener('keyboardWillShow', info => {
console.log(`JKY: Keyboard will show with height: ${info.keyboardHeight}`);
this.adjustModalForKeyboard(info.keyboardHeight);
});
this.keyboardHideListener = await Keyboard.addListener('keyboardWillHide', () => {
this.resetModalPosition();
});
}
I’m using an inline modal
<ion-modal
#aModal
[initialBreakpoint]="1"
[breakpoints]="[0, 1]"
[canDismiss]="preventDismissByGesture"
[backdropDismiss]="false"
[keyboardClose]="false"
[handle]="false"
>
<ng-template>
<my-component-with-an-input></my-component-with-an-input>
</ng-template>
</ion-modal>
ion-modal {
--height: auto;
}
I’m out of ideas as to what to try.