# Keyboard pushes elements out of top of view?

**URL:** <https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212>\
**Category:** ionic-v3\
**Created:** [May 4, 2016, 9:02pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212 "2016-05-04T21:02:07Z")\
**Posts on this page:** 13\
**Page:** 2

<div class="post-metadata">

**Author:** ![rashnk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rashnk/32/109109_2.png) [@rashnk](https://forum.ionicframework.com/u/rashnk)\
**Post date:** [May 17, 2017, 4:47am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/21 "2017-05-17T04:47:17Z")

</div>

@jrmcdona, can u post app.component.ts page also u need to upgrade to native 3, see i had the same problem that when focusing an input the view is pushed to top and extra space is added below, so i did this and it was solved, please make sure u have upgraded to native3,

`npm install @ionic-native/core --save.`  
then u have to modify the imports check the docs here [https://github.com/driftyco/ionic-native/blob/master/README.md](https://github.com/driftyco/ionic-native/blob/master/README.md).

> **[Ionic Framework](https://ionicframework.com/docs/native/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

check this doc. [http://ionicframework.com/docs/native/keyboard/](http://ionicframework.com/docs/native/keyboard/)

```auto
$ ionic plugin add --save ionic-plugin-keyboard
$ npm install --save @ionic-native/keyboard

```

and add provider for plugin like this

```auto
providers: [
    ...
    Keyboard
    ...
  ]

```

then try my solution as i posted earlier `IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),`

---

<div class="post-metadata">

**Author:** ![jrmcdona](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jrmcdona](https://forum.ionicframework.com/u/jrmcdona)\
**Post date:** [May 17, 2017, 12:24pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/22 "2017-05-17T12:24:06Z")

</div>

@rashnk Thanks for the reply. Here is my app component and app module and package.json. I upgrade the native-core just now. I attached a screen shot of my issue. I still cannot see the input box when the keyboard comes up so I have no idea what is being typed. But the elements at the top are not pushed out of view anymore with the disablescroll(true) fix. I tried messing with the HTML CSS to see if that was the issue but doesn’t seem to be from what I can tell. Have you seen a working plunkr?

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/7/5/75aa98dcac2b37950afb8a15688f66016602d0fe.png)

```auto
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { HomePage } from '../pages/home/home';
import { SplashScreen } from '@ionic-native/splash-screen';
import { BankPage } from '../pages/bank/bank';
import { ProfilePage } from '../pages/profile/profile';
import { SocketTest } from '../pages/socket-test/socket-test';
import { ListPage } from '../pages/list/list';
import { NotificationPage } from '../pages/notification/notification';
import { AppPreferences } from '@ionic-native/app-preferences';
import { AppState } from '../models/appState.model';
import { Observable } from 'rxjs/Rx';
import { Store } from '@ngrx/store';
import { DemoDataService } from '../services/demodata.service'
import { DataEvent } from '../models/dataEvent'
import { State } from '../reducers';
import { AppActions } from '../actions';
import { ChatExampleData } from '../data/chat-example-data';
import { UsersService } from '../services/users.service';
import { ThreadsService } from '../services/threads.service';
import { MessagesService } from '../services/messages.service';
import { ChatTestPage } from '../pages/chattest/chattest';
import { Keyboard } from '@ionic-native/keyboard';

@Component({
  templateUrl: 'app.html',
  providers: [Keyboard]
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{ title: string, component: any }>;
  private _settings: AppPreferences;
  public _appState: Observable<AppState>;
  private bankQuestions: Observable<any>;
  public dataEventsStream: Observable<any>;
  private dataEventsStreamSubscription: any;

  constructor(public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    private appPreferences: AppPreferences,
    private dataService: DemoDataService,
    private store: Store<State>,
    private appActions: AppActions,
    public messagesService: MessagesService,
    public threadsService: ThreadsService,
    public usersService: UsersService,
    private keyboard: Keyboard) {

    //chat samples
    ChatExampleData.init(messagesService, threadsService, usersService);

    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'Profile', component: ProfilePage },
      { title: 'Bank', component: BankPage },
      { title: 'Socket Test', component: SocketTest },
      { title: 'Notification Test', component: NotificationPage },
      { title: 'Chat Mock', component: ChatTestPage }
    ];

  }

  initializeApp() {

    //Let's break things down when pause happens
    this.platform.pause.subscribe((x) => {
      console.log("platform pause");
      this.dataService.shutdown();
      this.store.dispatch(this.appActions.removeAllDataEvents());
      this.dataEventsStreamSubscription.unsubscribe();
    },
      error => {
        console.log("platform pause error");
      });

    //after app comes from background, this resume fires!
    this.platform.resume.subscribe((x) => {
      console.log("platform resume");
      this.initDataEventStream();
    },
      error => {
        console.log("platform resume error");
      });

    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      //set up data events stream
      this.initDataEventStream();

      /*
      * Disable the Ionic Keyboard Plugin scroll for iOS only
      * https://github.com/driftyco/ionic/issues/5571
      */

      //if (this.platform.is('ios')) {
        this.keyboard.disableScroll(true);
      //}

      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  //Data Events
  initDataEventStream() {
    console.log("enter initDataEventStream")
    //websocket connection
    this.dataService.connect();

    this.dataEventsStream = this.dataService.events.scan((acc, e) => {
      console.log('Data event received: ' + e.id + ' command: ' + e.command);
      if (e.command && e.command === 'REMOVE') {

        //var index = acc.findIndex((item) => item.id === e.id);
        //acc.splice(index, 1);
        this.store.dispatch(this.appActions.removeDataEvent(e.id));
        return acc;
      } else {

        this.store.dispatch(this.appActions.loadDataEvent(e));

        return acc.concat(e);
      }
    }, []);

    this.dataEventsStreamSubscription = this.dataEventsStream.subscribe(
      x => {
        console.log("dataEventsStreamSubscription emitted.");
      },
      error => {
        console.log("dataEventsStreamSubscription failed");
        console.error(error);
      });
  }

  ngOnDestroy() {
    this.dataEventsStreamSubscription.unsubscribe();
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

```

```auto

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { Push } from '@ionic-native/push';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ProfilePage } from '../pages/profile/profile';
import { BankPage } from '../pages/bank/bank';
import { RespondPage } from '../pages/respond/respond';
import { NotificationPage } from '../pages/notification/notification';
import { SocketTest } from '../pages/socket-test/socket-test'
//import {SocketTestModule} from '../pages/socket-test/socket-test.module';
import { ProfileService } from '../services/profile.service';
import { DemoDataService } from '../services/demodata.service'
import { WebSocketConnection } from '../services/websocket.connection'
import { NotificationService } from '../services/notification.service';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ChatThreadComponent } from '../components/chat-thread/chat-thread.component';
import { ChatWindowComponent } from '../components/chat-window/chat-window.component';
import { ChatMessageComponent } from '../components/chat-message/chat-message.component';
import { IonicStorageModule } from '@ionic/storage';
import { AppPreferences } from '@ionic-native/app-preferences';
//import {reducer} from '../reducers';
import { AppActions } from '../actions/index';
import { StoreModule, combineReducers } from "@ngrx/store";
import { compose } from "@ngrx/core/compose";
import { storeLogger } from "ngrx-store-logger";
import { reducer } from '../reducers'
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { TickerComponent } from '../components/ticker/ticker.component';
import { FromNowPipe } from '../pipes/from-now.pipe';
import { UsersService } from '../services/users.service';
import { ThreadsService } from '../services/threads.service';
import { MessagesService } from '../services/messages.service';

import { ChatTestPage } from '../pages/chattest/chattest';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    ProfilePage,
    BankPage,
    RespondPage,
    NotificationPage,
    SocketTest,
    ChatThreadComponent,
    ChatWindowComponent,
    ChatMessageComponent,
    TickerComponent,
    FromNowPipe,
    ChatTestPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
    // http://ionicframework.com/docs/v2/api/config/Config/)
    HttpModule,
    IonicStorageModule.forRoot(),
    //SocketTestModule,
    StoreModule.provideStore(reducer)
    // StoreDevtoolsModule.instrumentStore()
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    ProfilePage,
    BankPage,
    RespondPage,
    NotificationPage,
    ChatTestPage
    //SocketTest
  ],
  providers: [
    StatusBar,
    SplashScreen,
    ProfileService,
    DemoDataService,
    WebSocketConnection,
    NotificationService,
    Push,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    AppPreferences,
    AppActions,
    MessagesService, ThreadsService, UsersService
  ]
})
export class AppModule { }

```

```auto

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/app-preferences": "^3.6.1",
    "@ionic-native/core": "^3.8.1",
    "@ionic-native/keyboard": "^3.8.0",
    "@ionic-native/push": "^3.6.1",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.2",
    "@ngrx/store-devtools": "^3.2.4",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "moment": "^2.18.1",
    "ngrx-store-logger": "^0.1.7",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "remotedev": "^0.2.7",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "ionic-plugin-keyboard",
    "cordova-plugin-splashscreen"
  ],
  "cordovaPlatforms": [],
  "description": "Microsoft.Responder: An Ionic project"
}

```

---

<div class="post-metadata">

**Author:** ![rashnk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rashnk/32/109109_2.png) [@rashnk](https://forum.ionicframework.com/u/rashnk)\
**Post date:** [May 17, 2017, 5:54pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/23 "2017-05-17T17:54:10Z")

</div>

Please try this solution, [Keyboard hides input until I start typing](https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827/6)

---

<div class="post-metadata">

**Author:** ![jrmcdona](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jrmcdona](https://forum.ionicframework.com/u/jrmcdona)\
**Post date:** [May 23, 2017, 3:03pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/24 "2017-05-23T15:03:03Z")

</div>

I am trying out the WKWebView branch and it seems to be working pretty well.

> <https://github.com/ionic-team/ionic/issues/11501>

Except for one small issue that you see in the recording where the input box is slightly delayed when showing up.

Here is my recording:  
[https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA](https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA)

Hoping they fix that and it should be working really nice. Haven’t tested with Android.

---

<div class="post-metadata">

**Author:** ![nathanmonte](https://avatars.discourse-cdn.com/v4/letter/n/13edae/32.png) [@nathanmonte](https://forum.ionicframework.com/u/nathanmonte)\
**Post date:** [August 22, 2017, 10:43am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/25 "2017-08-22T10:43:25Z")

</div>

Thanks, this actually worked for me. I however did not use the diableScroll option in my initializeApp method.

Thanks!

---

<div class="post-metadata">

**Author:** ![rashnk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rashnk/32/109109_2.png) [@rashnk](https://forum.ionicframework.com/u/rashnk)\
**Post date:** [August 25, 2017, 11:29am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/26 "2017-08-25T11:29:02Z")

</div>

Keep up the good work. 🤣

---

<div class="post-metadata">

**Author:** ![jonathancod](https://avatars.discourse-cdn.com/v4/letter/j/46a35a/32.png) [@jonathancod](https://forum.ionicframework.com/u/jonathancod)\
**Post date:** [September 21, 2017, 2:52pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/27 "2017-09-21T14:52:21Z")

</div>

Worked for me, thanks.

---

<div class="post-metadata">

**Author:** ![jatapiaro](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@jatapiaro](https://forum.ionicframework.com/u/jatapiaro)\
**Post date:** [September 29, 2017, 9:06pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/28 "2017-09-29T21:06:50Z")

</div>

If your problem is on android, maybe this will help you. In the ionic config.xml, add the following lines in the platform name=“android” tag.

```
<platform name="android"> 
  <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /></edit-config>
  ...the rest of the android configs...
</platform>

```

This will prevent the keyboard to push up everything and simple overlay the keyboard on the content. So the behaviour will be the same or similar to the ios keyboard

---

<div class="post-metadata">

**Author:** ![sahyun1](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@sahyun1](https://forum.ionicframework.com/u/sahyun1)\
**Post date:** [November 8, 2017, 9:25pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/29 "2017-11-08T21:25:17Z")

</div>

jatapiaro solution works well for android, this is what I was looking for!  
just one thing, I had to get rid of android like  
`<activity android:windowSoftInputMode="adjustPan" />`  
To  
`<activity windowSoftInputMode="adjustPan" />`

---

<div class="post-metadata">

**Author:** ![8tomo8](https://avatars.discourse-cdn.com/v4/letter/8/c89c15/32.png) [@8tomo8](https://forum.ionicframework.com/u/8tomo8)\
**Post date:** [August 6, 2018, 9:57am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/30 "2018-08-06T09:57:55Z")

</div>

If anyone still gets this issue on iOS, please make sure you are checking on an iOS build not on the Dev App. The issue persists on Ionic Dev App for me even though the keyboard plugin is included, but works fine when built and run on device.

---

<div class="post-metadata">

**Author:** ![mateotherock](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@mateotherock](https://forum.ionicframework.com/u/mateotherock)\
**Post date:** [August 6, 2018, 8:35pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/31 "2018-08-06T20:35:04Z")

</div>

@jatapiaro I just have to say that I just spent half a day trying to resolve this (including manually editing the AndroidManifest.xml itself!) and this was the only thing that worked. Thank you so much for this. For my own curiosity though, why would the edit-config tag work here and not editing the Manifest file itself? Actually now that I think about it maybe I wasn’t removing the “android:” part of it before as @sahyun1 mentioned…

---

<div class="post-metadata">

**Author:** ![abcoskn](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@abcoskn](https://forum.ionicframework.com/u/abcoskn)\
**Post date:** [February 8, 2019, 8:05am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/32 "2019-02-08T08:05:37Z")

</div>

You saved my day! Thank you.

---

<div class="post-metadata">

**Author:** ![akil27](https://avatars.discourse-cdn.com/v4/letter/a/90ced4/32.png) [@akil27](https://forum.ionicframework.com/u/akil27)\
**Post date:** [July 4, 2019, 7:33am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/33 "2019-07-04T07:33:34Z")

</div>

Thanks This is the only solution that worked in android but it affects whole app. But I want to enable this in one page and disable in another. Is there a way to do this?

[Previous page](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212.md?page=1)