Keyboard pushes elements out of top of view?

#1

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?

Keyboard pushes elements out of top of view
#2

So you can use that same method in ionic 2.

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();
    });
  }
}
2 Likes
#3

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.

1 Like
#4

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 } ),
6 Likes
Keyboard-attach in Ionic 2
Prevent keyboard pushing view in Ionic and MKWebVIew in iOS
#5

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

#6

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

#7

This is what I was looking for. THANKS

4 Likes
#8

You need to use it in coordination with:

1 Like
#9

this is working! saving my time, thanks !

2 Likes
#10

this solution not working for rc4, native 3

#11

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

#12
  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
import { Keyboard } from '@ionic-native/keyboard';

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



initializeApp() {

 this.keyboard.disableScroll(false);
}
5 Likes
#13

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

#14

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!

#15

Are u upgraded to native 3 ?
post ur page here

#16

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:

<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>
#17

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

Thanks!

#18

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

#19

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.

1 Like
#20

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