Input field covered by keyword

Ionic Framework
1

I have a problem with displaying an input field. When the user clicks on the field to enter the value, the keyboard appears. the portion of the page is partially covered and the input field is no longer visible. what is the best solution to apply?

Catch ionFocus is the best practice to solve my issue?

<ion-input (ionFocus)="adjustLayout($event)"></ion-input>

adjustLayout(event) {
  // Codice per spostare il contenuto in modo che il campo di testo sia visibile
}

ezgif-6-5887352966

Thanks

L

2

Ionic accounts for the keyboard height in most cases (many fixes in Ionic 7). Looking at your example, it seems something else is going on. Hiding part of the modal doesn’t seem normal behavior.

Please run ionic info and share the results. Also, please share some code. A minimal reproduction of the issue is optimal, either a Git repo or StackBlitz.

Not an answer to your question but I don’t think you should need to deal with ionFocus and such.

1 Like
3 
>> ionic info

Ionic:

   Ionic CLI                     : 7.2.0 (C:\tools\nvm\v18.16.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 7.7.3
   @angular-devkit/build-angular : 17.2.2
   @angular-devkit/schematics    : 17.2.2
   @angular/cli                  : 17.2.2
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : 5.7.1
   @capacitor/core    : 5.7.4
   @capacitor/ios     : 5.7.4

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.1

System:

   NodeJS : v18.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 9.5.1
   OS     : Windows 10

CSS, global.scss

.small-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 245px 16px;
    --border-radius: 0 !important;
}

Typescript

    const modal = await this.modalController.create({
      component: QuantityPopupPage,
      componentProps: {
        availableQnt: item.available
      },
      cssClass: 'borderModal small-modal',
      showBackdrop: false,
      mode: 'ios',
      presentingElement: await this.modalController.getTop(),
    });

HTML page

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="end" class="btn-left" (click)="close()">
          <ion-icon name="close-outline"></ion-icon>
      </ion-buttons>
      <ion-title>QuantitĂ </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
   <div class="ion-padding">
     <ion-list>
      <!--form-group-->
      <div class="form-group">
        <ion-label position="stacked">QuantitĂ  richiesta</ion-label>
        <ion-item class="ion-no-padding">
          <ion-input type="number" [(ngModel)]="qnt" no-lines placeholder="Inserisci la quantitĂ "></ion-input>
        </ion-item>
      </div>
       <!--//form-group-->
     </ion-list>
     
     <div class="btn-full">
      <ion-row>
        <ion-col size="6">
          <ion-button (click)="close()">Annulla</ion-button>
        </ion-col>
        <ion-col size="6">
          <ion-button class="btn-brown" (click)="confirm()">Prenota</ion-button>
        </ion-col>
      </ion-row> 
     </div>
   </div>
</ion-content>
4

I am going to guess your small-modal class CSS is messing things up. If you want a custom height of the modal, use the custom height properties. Or prior to Ionic adding these, I currently do the following for dymanic height in Ionic 7:

ion-modal.auto-height {
    --height: auto;
}
ion-modal.auto-height::part(content) {
    position: relative;
    display: block;
    contain: content;
}
ion-modal.auto-height .ion-page {
    overflow: visible;
}
ion-modal.auto-height .inner-content {
    max-height: 80vh;
    overflow: auto;
}

<IonModal class="auto-height">
    <div class="inner-content">
        <div class="p-4">
            <slot />
        </div>
    </div>
</IonModal>