CODEWITHSUNDEEP
angularcordovaionic-frameworkionic4
Selast Lambou
Selast Lambou

Reputation: 748

Is there a way to make the keyboard not be on top of ion-input?

We're deploying an Ionic app and we just find out, that the keyboard is sitting on top of the ion-input when the ion-input is focused. How should I make it change?

I've looked for the previous eight hours to find a solution, but all that I've tried isn't working.

Here are some pages I find out:

https://www.bountysource.com/issues/35651824-keyboard-overlaps-the-text-input-when-the-input-is-placed-inside-an-ion-footer

https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard

https://github.com/ionic-team/ionic-v3/issues/117 and related pages.

<ion-list>
    ...
    <!--There are some element before, so that this one is at the bottom-->
    <ion-item>
        <ion-label position="floating">Description</ion-label>
        <ion-textarea type="text"
                      id="description"
                      [rows]="6"
                      [maxlength]="255"
                      name="description"
                      placeholder="Having more things to say ?"
                      [(ngModel)]="announce.description"
                      #description="ngModel"
                      required></ion-textarea>
    </ion-item>
    <div class="error-text" padding-start padding-end margin-bottom>
        <small>
            <span *ngIf="description.touched && description?.errors?.required">Required</span>
            <span *ngIf="description.touched && description?.errors?.maxlength">The max value 255</span>
        </small>
    </div>

</ion-list>

Expected:

As says the title, I would like the keyboard to appear at the foot of my footer.

Actual:

The keyboard is on top of the ion-textarea. And it's not showing when I type.

Upvotes: 0

Views: 853

Answers (1)

Selast Lambou
Selast Lambou

Reputation: 748

After some investigations, the problem wasn't actually on the keyboard or other, but only located on the status bar's plugin which was causing the app to be pulled down and somehow, Cordova didn't know anymore how height the screen is.

Description

I was using StatusBar.overlaysWebView(true) to have the app screen on top of the status bar so it could handle color changes.

Doing that was just precisely the problem, as explained on their opened issue on GitHub.

Solution

Use 

cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize

to install another version of the same plugin, which would solve the problem.

But meanwhile the problem should already be merged, as said in the same thread.

Upvotes: 1

Related Questions