Not able scroll to input in ionic (I'm not using ion-input)

Ionic Framework ionic-v3
1

Hi all,

I’m facing a problem in Ionic 2 when trying to use custom input (I’m not using ion-input). The content is not pushing up when input is focusing and the keyboard overlaps input as well.

This gif will describe my issue:

Here is my expected behavior:

I knew ion-input can resolve this problem but how I can resolve this problem with custom input?
Thanks in advance

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.3.0 ios 4.5.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v8.7.0
    npm  : 5.5.1 
    OS   : macOS High Sierra

Misc:

    backend : pro
2

Any help, please. If you need more information just ask me.

3

this problem occur because of keyboard plugins.may be your keyboard plugins not work properly with your custom components.

one solution i know is that set position of content or your div position to relative from absolute when keyboard appear.

may be it works

4

Thanks @hirenkorat3. It seems I have to use ion-input to resolve this problem but I wanna use custom input for my project. Is there any way to resolve this problem?

Here is my custom input with icon inside.

<div class="input-icon" padding>
   <i class="flaticon-mail"></i>
   <input placeholder="Your email" formControlName="email" [(ngModel)]="signupProvider.signUpModel.email.email" (blur)="checkEmail()" />
</div>

Thanks

5

when you keyboard appear means when your (focus) event of custom input fire ,you can set position:relative and when focus out ,set position:absolute

this is automatically handle keyboard event and allow you to scroll perfectly

1 Like
6

Thanks. I’ve tried another way by using ion-input.