Form moves up when ion-input fields get focus


#1

Hi everyone,

I am building a registration form with several fields. Name, e-mail, password… nothing special:

<ion-content padding scrollbar-y-auto class="register-page-container">
  <ion-grid>
    <ion-row justify-content-center align-items-center class="register-page-content">
      <ion-col align-self-center [attr.col-6]="isLarge? true : null">
        <form #registerForm="ngForm" novalidate [formGroup]="form" >
              <ion-item padding-right>
                <ion-input style="color: #757575; font-family: 'Roboto Light';"
                placeholder="Name"
                [ngModelOptions]="{standalone: true}"
                [(ngModel)]="account.name" 
                type="text"
                name="name"
                #name="ngModel"
                required
                ></ion-input>
              </ion-item>

              <div *ngIf="name.invalid && name.dirty">
                <span class="global__input-error">Name not valid.</span>
              </div>

              [...]

But when some fields get selected and the native keyboard shows up, the form gets compressed and moves up, so the fields go under the header and sometimes you can’t see what you’re typing.

I have tried importing the Keyboard plugin and disabling the scroll with:
keyboard.disableScroll(true);

But no luck. Even when testing with ionic serve in the browser the form moves up when selecting some fields.

Is there any way to disable that feature? I am using Ionic 3.3.0.

Thanks!


#2

Ok, it seems ionic generates a div with a class input-cover to the fields, so adding:

.input-cover { position: static; }

to the scss file stabilizes it. So now the form doesn’t get compressed, it just moves up.

Now I have to find the way of preventing the form from moving up when selecting ion-input elements that are in the top part of the screen.

Any ideas? Thanks!


#3

Same problem here. Any solution?