Keyboard hides inputs - Ionic 5

Question

Ionic 6 (Angular) hides input when keyboard shows. What happens is that when I focus on an input the keyboard lifts up and covers the selected input. Is there a way to avoid this behavior by making it auto-scroll until the keyboard is positioned below the selected input?

INPUT/KEYBOARD IMG

you can simply use a "margin" in your page. If you want you make the margin using only `[style.margin-bottom]="onFocus?'20rem':null"` and in each input in (focus)/(blur)change the property onFocus to true/false -or use a directive — Eliseo, Dec 01 '20 at 07:58
I was facing the same issue in my ionic app (with Capacitor). I resolved the issue by just installing the Keyboard plugin. That's right, I didn't even have to use the plugin anywhere, I just had to install it & it did the trick. I don't why it's like that but for me, it only works when I have the plugin installed even if I'm not using it to get different behaviour. https://capacitorjs.com/docs/apis/keyboard#install — Junaid, Nov 09 '22 at 13:52

score 2 · Answer 1 · answered Dec 01 '20 at 06:46

If you are using cordova, you can set what happens to the UI when soft-keyboard appears ('adjustResize' or 'adjustPan').

For that, inside config.xml, add an <edit-config> tag in <platform name="android">

<edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:name='MainActivity']" mode="merge">
        <activity android:windowSoftInputMode="adjustPan" />
</edit-config>

Make sure to add android-res namespace in <widget> tag :

<widget xmlns:android="http://schemas.android.com/apk/res/android" .....>

For Capacitor apps:

Use Keyboard API's setResizeMode() method for adjusting the UI when keyboard appears.

In app.component.ts:

import { Plugins, KeyboardInfo } from '@capacitor/core';

const { Keyboard } = Plugins;

...

Keyboard.setResizeMode({mode:'ionic'});

For other suported modes, checkout https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only

import Plugins is deprecated and Capacitor 3 now uses modulated plugins so they're all independent of each other. In this case you can simply import Keyboard directly, like so: import { Keyboard } from '@capacitor/keyboard'; — Vadym, May 06 '23 at 04:40

score 1 · Answer 2 · answered Dec 01 '20 at 08:16

you can simply use a "margin" in your page.

If you want you make the margin using only [style.margin-bottom]="onFocus?'20rem':null" and in each input in (focus)/(blur)change the property onFocus to true/false. To make this "easy", you can use a directive, the directive make a next to a Subject of a service, and in the main component you subscribe to this subject. Well, in code:

The service:

@Injectable({
  providedIn: 'root',
})
export class AuxService {

  focusSubject:Subject<boolean>=new Subject<boolean>()
  constructor() { }
}

The directive: (see the "selector" of the directive, is applied to all the inputs else checkbox)

@Directive({
  selector: 'input:not([type="checkbox])'
})
export class OnFocusDirective {
  @HostListener('focus')
  _() {
    this.auxService.focusSubject.next(true)
 }
  @HostListener('blur')
  __() {
    this.auxService.focusSubject.next(false)
 }
  constructor(private auxService:AuxService) { }
}

The main-component:

export class AppComponent{
  onFocus$=this.auxService.focusSubject

  constructor(private auxService:AuxService) { }
}

And its .html

<div [style.margin-bottom]="(onFocus$|async)?'20rem':null">
    <p>
        Start editing to see some magic happen :)
    </p>
    <input>
</div>

The stackblitz

I think that should work

Keyboard hides inputs - Ionic 5

2 Answers2