Ionic slide hiding content when the keyboard appears

[IgorSamer]

I’m trying to use ion-slides component, but, when I focus some input and the keyboard appears, the content is repositioned to the top and is almost impossible to see. With browser works fine, but, when I ionic cordova run android --device this strange behavior happens.

Prints:

When I enter on the app:

When some input is focused and the keyboard is shown:

And when keyboard is hidden again:

My code:

<ion-content padding class="bg-gradient swiper-no-swiping">
  <ion-slides>
    <ion-slide>
      <h1>What's your name?</h1>

      <span margin-bottom>Tell me, please.</span>

      <form [formGroup]="formName" (ngSubmit)="submitName(formName.value)">
        <ion-grid no-padding>
          <ion-row>
            <ion-col>
              <ion-item margin-bottom>
                <ion-input type="text" placeholder="First Name" formControlName="firstName"></ion-input>
              </ion-item>
            </ion-col>

            <ion-col>
              <ion-item margin-bottom>
                <ion-input type="text" placeholder="Last Name" formControlName="lastName"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>

        <button ion-button block type="submit" [disabled]="!formName.valid">Next</button>
      </form>
    </ion-slide>

    <ion-slide>
      <h1>Heeey!</h1>
    </ion-slide>
  </ion-slides>
</ion-content>

How can I fix it?

[hokauz]

Hi Igor,

I hope that i can help u. I was with the same problem, but in other app it was working fine. The difference?

In the other i put the ion-slides inside a ion-grid.

<ion-grid>
  <ion-row>
    <ion-col>

       ... ion-slides here

    <ion-col>
  </ion-row>
</ion-grid>

Look the code. I really hope that this resolve your problem, but i not sure that this work on ios because i not try yet.

[IgorSamer]

Thanks for your reply! It worked, but the content was aligned to top, and I want the content in the middle of page. So, I tried to center ion-grid using CSS, content centralized but with the same error when keyboard appears.

Researching a lot, I discovered that a lot of people suffer from this bug, and that the Ionic team apparently has not yet found a solution to this. And I discovered on this link a workaround using CSS.

Just added to CSS of my slides:

.scroll-content{
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

And it’s working perfectly now. (tested on Android only).