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


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


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


    backend : pro


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


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


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)]="" (blur)="checkEmail()" />



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


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