# 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:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamesinman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesinman/32/99949_2.png) [@jamesinman](https://forum.ionicframework.com/u/jamesinman)\
**Post date:** [May 4, 2016, 9:02pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/1 "2016-05-04T21:02:07Z")

</div>

I have a textarea on a page with some divs above it. When I focus on the textarea, the content above is being pushed off screen. When I blur out of the textarea, it jumps back down, but there is a noticable 1-2s delay.

The ideal would be that the content isn’t pushed off screen. On the Ionic 1 docs, I see the following:

_If the content of your app (including the header) is being pushed up and out of view on input focus, try setting cordova.plugins.Keyboard.disableScroll(true). This does not disable scrolling in the Ionic scroll view, rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard._

Is there an alternative or workaround for Ionic 2?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [May 5, 2016, 3:50pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/2 "2016-05-05T15:50:16Z")

</div>

So you can use that same method in ionic 2.

```auto
import {App, Platform} from 'ionic-angular';
import {StatusBar, Keyboard} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {}
})
export class MyApp {
  rootPage: any = TabsPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Here I'm using the keyboard class from ionic native.
      Keyboard.disableScroll(true)
      StatusBar.styleDefault();
    });
  }
}

```

---

<div class="post-metadata">

**Author:** ![jamesinman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesinman/32/99949_2.png) [@jamesinman](https://forum.ionicframework.com/u/jamesinman)\
**Post date:** [May 5, 2016, 9:10pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/3 "2016-05-05T21:10:19Z")

</div>

Thanks, Mike. I’ve tried the Keyboard.disableScroll(true) but I’m still getting the same issue. I’ll try reproduce on a clean app and log it on GitHub.

---

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [October 18, 2016, 9:35pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/4 "2016-10-18T21:35:48Z")

</div>

For me the Keyboard.disableScroll(true) just work in the ionViewDidEnter…

```
ionViewDidEnter() {
    this.platform.ready().then(() => {
      Keyboard.disableScroll(true);
    });
}

ionViewWillLeave() {
    this.platform.ready().then(() => {
      Keyboard.disableScroll(false);
    });
}

```

And remember to add in your NgModule:

```
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
```

---

<div class="post-metadata">

**Author:** ![crkvend](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@crkvend](https://forum.ionicframework.com/u/crkvend)\
**Post date:** [October 28, 2016, 12:30pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/5 "2016-10-28T12:30:16Z")

</div>

What do scrollAssist autoFocusAssist actually do? They are not documented here:

> **[Ionic Framework](https://ionicframework.com/docs/api/config/Config/)**
>
> 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

---

<div class="post-metadata">

**Author:** ![rezility](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@rezility](https://forum.ionicframework.com/u/rezility)\
**Post date:** [November 10, 2016, 6:32am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/6 "2016-11-10T06:32:45Z")

</div>

I tried solution but i’m still gettting the same issue .

---

<div class="post-metadata">

**Author:** ![Blaydator](https://avatars.discourse-cdn.com/v4/letter/b/bbe5ce/32.png) [@Blaydator](https://forum.ionicframework.com/u/Blaydator)\
**Post date:** [November 17, 2016, 12:36pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/7 "2016-11-17T12:36:16Z")

</div>

> [@Corin](#):
>
> And remember to add in your NgModule:
> 
> IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),

This is what I was looking for. THANKS

---

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [November 17, 2016, 8:31pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/8 "2016-11-17T20:31:00Z")

</div>

You need to use it in coordination with:

> [@Corin](#):
>
> For me the Keyboard.disableScroll(true) just work in the ionViewDidEnter…
> 
> ionViewDidEnter() {  
> this.platform.ready().then(() =\> {  
> Keyboard.disableScroll(true);  
> });  
> }
> 
> ionViewWillLeave() {  
> this.platform.ready().then(() =\> {  
> Keyboard.disableScroll(false);  
> });  
> }

---

<div class="post-metadata">

**Author:** ![errorstudent](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/errorstudent/32/106796_2.png) [@errorstudent](https://forum.ionicframework.com/u/errorstudent)\
**Post date:** [February 12, 2017, 7:15am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/9 "2017-02-12T07:15:49Z")

</div>

this is working! saving my time, 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:** [April 27, 2017, 8:50am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/10 "2017-04-27T08:50:59Z")

</div>

this solution not working for rc4, native 3

---

<div class="post-metadata">

**Author:** ![Dranix](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@Dranix](https://forum.ionicframework.com/u/Dranix)\
**Post date:** [May 3, 2017, 8:18am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/11 "2017-05-03T08:18:08Z")

</div>

Hi, do you have a solution for this issue yet?

---

<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 4, 2017, 6:35am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/12 "2017-05-04T06:35:40Z")

</div>

1. remove keyboard plugin and add again

2. Add this app.module.ts

`IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),`

1. in app.component.ts

```auto
import { Keyboard } from '@ionic-native/keyboard';

constructor(
        public platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private keyboard: Keyboard
    )

initializeApp() {

 this.keyboard.disableScroll(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 16, 2017, 1:20am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/13 "2017-05-16T01:20:02Z")

</div>

> [@rashnk](#):
>
> rd.disableScroll(false);

This doesn’t work for me. Do you need a special text input box or anything? I am using text area.

---

<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 16, 2017, 1:20am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/14 "2017-05-16T01:20:55Z")

</div>

I didn’t mean to include the quote. I tried everything in rashnk’s post. Nothing working.

Do you have the sample HTML of your page? 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:** [May 16, 2017, 2:29am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/15 "2017-05-16T02:29:20Z")

</div>

Are u upgraded to native 3 ?  
post ur page here

---

<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 16, 2017, 11:11am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/16 "2017-05-16T11:11:21Z")

</div>

Thanks for the reply!

Here is my version information:  
Cordova CLI: 6.4.0  
Ionic Framework Version: 3.0.1  
Ionic CLI Version: 2.1.14  
Ionic App Lib Version: 2.1.7  
Ionic App Scripts Version: 1.3.0  
ios-deploy version: 1.9.1  
ios-sim version: 5.0.12  
OS: macOS Sierra  
Node Version: v7.4.0  
Xcode version: Xcode 8.3.2 Build version 8E2002

I thought maybe the “no-bounce” in the ion-content was impacting it but it is not.

I am testing on iOS simulator and my device.

Here is the Mockup HTML of the page:

```auto
<ion-header>
    <ion-navbar color="primary">
        <button ion-button menuToggle>
      <ion-icon name="menu" color="light"></ion-icon>
    </button>
        <ion-title color="dark">Chat</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="app-background" no-bounce>

    <div class="chat-window-container" style="padding-top:20px">
        <div class="chat-window">
            <div class="message-list">

                <div class="msg-container base-receive" style="vertical-align:top;">
                    <div class="avatar" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">

                    </div>

                    <div class="messages msg-receive secondary-background-color">
                        <p>Hi</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                </div>

                <div class="msg-container base-sent" style="vertical-align:top;">
                    <div class="messages msg-sent primary-background-color">
                        <p>Hi</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                    <div class="avatar-sent" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
                    </div>
                </div>

                <div class="msg-container base-receive" style="vertical-align:top;">
                    <div class="avatar" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">

                    </div>

                    <div class="messages msg-receive secondary-background-color">
                        <p>It defines the default behaviour for how flex items are laid out along the cross axis on the current
                            line. You can think of it as the justify-content version for the cross-axis (perpendicular to
                            the main-axis).</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                </div>

                <div class="msg-container base-sent" style="vertical-align:top;">
                    <div class="messages msg-sent primary-background-color">
                        <p>The following figure helps understand how flex items are layed out depending on the align-items value.</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                    <div class="avatar-sent" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
                    </div>
                </div>
                
                <div class="msg-container base-receive" style="vertical-align:top;">
                    <div class="avatar" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">

                    </div>

                    <div class="messages msg-receive secondary-background-color">
                        <p>Hi</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                </div>

                <div class="msg-container base-sent" style="vertical-align:top;">
                    <div class="messages msg-sent primary-background-color">
                        <p>Hi</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                    <div class="avatar-sent" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
                    </div>
                </div>

                <div class="msg-container base-receive" style="vertical-align:top;">
                    <div class="avatar" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">

                    </div>

                    <div class="messages msg-receive secondary-background-color">
                        <p>It defines the default behaviour for how flex items are laid out along the cross axis on the current
                            line. You can think of it as the justify-content version for the cross-axis (perpendicular to
                            the main-axis).</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                </div>

                <div class="msg-container base-sent" style="vertical-align:top;">
                    <div class="messages msg-sent primary-background-color">
                        <p>The following figure helps understand how flex items are layed out depending on the align-items value.</p>
                        <p class="time">jrmcdona • 1 minute ago</p>
                    </div>
                    <div class="avatar-sent" style="display: inline-block">
                        <img src="../assets/images/cornerwharf04-avatar.png" style="width: 25px;height: 25px;">
                    </div>
                </div>
               
            </div>

            <message-input>

                <div style="flex:1;padding-left:5px;">
                    <textarea (keydown.enter)="onEnter($event)" autofocus="" placeholder="Type to chat..." maxlength="2000"></textarea>
                </div>
                <div (click)="onEnter($event)" style="display:table;width:50px;height:100%">
                    <ion-icon name="send" color="primary" class="message-send-icon"></ion-icon>
                </div>
            </message-input>

        </div>

    </div>

</ion-content>

```

---

<div class="post-metadata">

**Author:** ![Mystearica](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@Mystearica](https://forum.ionicframework.com/u/Mystearica)\
**Post date:** [May 16, 2017, 5:06pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/17 "2017-05-16T17:06:29Z")

</div>

I have the same problem on iOS, did you find out the solution?

Thanks!

---

<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 16, 2017, 5:07pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/18 "2017-05-16T17:07:49Z")

</div>

@Mystearica no not yet. Hoping @rashnk will shed some light on the issue. Or somebody whom has solved this!

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [May 16, 2017, 7:10pm UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/19 "2017-05-16T19:10:54Z")

</div>

This is something we are currently addressing in the wkwebview plugin.  
Right now the browser just doesn’t give us enough controls to do this in JS, so we’re working on adding this functionality to the plugin so we have an improved experience.

---

<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, 1:20am UTC](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/20 "2017-05-17T01:20:11Z")

</div>

Should we migrate to this wkwebview plugin? Any reason not too?  
Couldn’t find if wkwebview was the default in v3…0.1.

Our entire app is based off chat as the main functionality so I am trying to undersstand the roadmap and impacts.

Thanks

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