angularformsinputkeyboardcapacitor

Angular + Capacitor: Input not aligned with Keyboard

I'm developing an app in the angular environment. I mainly test and develop the app via browser and then build it via capacitor to run as a native app on iOS and Android.

I am now facing a bug, which heavily affects the overall user experience, where whenever the user presses on an input field (in the final iOS build) the iOS (Capacitor) Keyboard opens as desired, while also moving the input field away from the users focus. Sometimes it is even completely hidden by other UI elements.

Is there a way to programmatically move the focused input field to be always displayed exactly over the keyboard?

I also tried changing the Capacitor Keyboard "resize" settings (native, body, ionic, none) with no improvement.

I've attached examples and the html for my input form below. Thank you!

HTML FORM

Example Video: https://i.imgur.com/5NRsaX0.mp4

Solution

  • I'm not sur it will work for you, but please, try to

    1. Move this part into the ion-header enter image description here if not done so.
    2. Use ion-content instead of <div class="content">
    3. If you would like the targeted input to be directly under the header, then you could try to use the scrollToPoint method from ion--content like this
    <input (focus)="inputTrigger($event)">

    export class YourPage {
    @ViewChild(IonContent) theContent: IonContent;

   // 
    inputTrigger(event) {
      const position = event.target.getBoundingClientRet()
      this.theContent.scrollToPoint(0,position.top).then(()=>{})
    }
}

    It wont work out of the box cause I don't exactly know your code, but it may guide you to the answer ;)