CODEWITHSUNDEEP
angularkeyboardionic2screen
Cristina Extremera Romero
Cristina Extremera Romero

Reputation: 63

Keyboard pushes the screen up ionic 2

I'm developing an ionic 2 app. The html code of my login page is the following one:

<ion-header>
  <ion-navbar color="royal">
    <ion-title> Inicio de sesión </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="fondo">

  <img src="assets/markerBoy.png" class="logo"/>

  <ion-card center>

    <ion-card-header>
      Credenciales
    </ion-card-header>

    <ion-card-content>
      <form>
        <ion-list>
          <ion-item>
            <ion-label floating> Usuario: </ion-label>
            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating> Contraseña: </ion-label>
            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
          </ion-item>
        </ion-list>
        <div padding>
          <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
        </div>
      </form>
    </ion-card-content>

  </ion-card>

</ion-content>

I don't know why but when I run the app in an android device at first the screen looks right but when I click in the username input, the keyboard appears and pushes up the screen. I'll show you two images, one when nothing is selected and another when I click in the username input.

Normal Screen

Input clicked

Any idea?

Upvotes: 3

Views: 6113

Answers (3)

Raymond Lian
Raymond Lian

Reputation: 7

Ive been dealing with this issue but with Ionic 4. I fixed it by setting the CSS property of the position to relative.

For me specifically, I had a button that kept on getting moved when I wanted it at the bottom. Based on what you specify about the position it will always be relative to those that.

Its kind of funny that the properties fixed and absolute have to do with currently available space. https://www.w3schools.com/css/css_positioning.asp

Upvotes: -1

Safvan CK
Safvan CK

Reputation: 1340

This solution works well for android, this is what I was looking for! just one thing, just make a change in android manifest file.

add the tag attribute:

android:windowSoftInputMode="adjustPan"

inside <activity XXXattributeXX>

eg:

<activity android:windowSoftInputMode="adjustPan" />

Upvotes: 2

Pezetter
Pezetter

Reputation: 2862

I've had success doing the following:

1.) Throwing content you dont want to scroll within a ion-fixed container:

<ion-content class="fondo">
    <div ion-fixed>
        <img src="assets/markerBoy.png" class="logo" />

        <ion-card center>

            <ion-card-header>
                Credenciales
            </ion-card-header>

            <ion-card-content>
                <form>
                    <ion-list>
                        <ion-item>
                            <ion-label floating> Usuario: </ion-label>
                            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating> Contraseña: </ion-label>
                            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
                        </ion-item>
                    </ion-list>
                    <div padding>
                        <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
                    </div>
                </form>
            </ion-card-content>

        </ion-card>
    </div>
</ion-content>

2.) I've also read the changing from ion-input to the standard input element fixes some keyboard issues.

Upvotes: 1

Related Questions