Keyboard hides inputs - Ionic 5

Question

I have a problem with my application made with Ionic 5 / angular. 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

score 1 · 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

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