Android - keyboard is over the input (doesn't scroll to input)

In my application, I have an input list like so.

This is using an ion-grid with left column size 10 (x button) and an unspecified width column (should be 90) with an input, and an ion-note with item right (the picture icon)

There is content above that list, and below that list.

If I scroll up (I’m at the top of the page) and press on “Answer #3” (which is at the bottom of my view) this happens:

image

Answer #3 is hidden!

However, if I first scroll down to the bottom of the page, and then press on “Answer #4”, it shows fine, because it is at the top of my view:
image

I tried setting these inputs inside a form tag, which did not help.

I also found, that when I type a letter, it does scroll to the input, but just a click does not.

How do I add scroll to input on click? (so keyboard doesn’t hide it)

You should probably post (part of) your code, so someone with experience at the used components can look at it to see if you missed something.

Ok, here is some code:
Note: answers is of type Array<{text: string, file: FileInterface}>

<ion-grid text-center>
    <ion-row *ngFor="let answer of answers; let i = index;">
        <ion-col width-10>
            <button ion-button clear icon-only (click)="removeAnswer(i)">
                <ion-icon name="ios-close-circle-outline"></ion-icon>
            </button>
        </ion-col>
        <ion-col>
            <ion-item>
                <ion-label floating>Answer #{{i+1}}</ion-label>
                <ion-input type="text"
                           [(ngModel)]="answer.text"
                           autocorrect="on"
                           autocomplete="on"
                           spellcheck="true"
                           minlength="answer_min_length"
                           maxlength="answer_max_length">
                </ion-input>
                <ion-note item-right class="custom-note">
                    <app-file-upload [file]="answer.file"></app-file-upload>
                </ion-note>
            </ion-item>
        </ion-col>
    </ion-row>
</ion-grid>

Apparently, it is a bug with new Ionic:

I still have a similar problem, do you have any workaround? for example doing the view scrollable so I can see the last fields when keyboard is being shown?

1 Like