Keyboard pushes elements out of top of view?

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!

Are u upgraded to native 3 ?
post ur page here

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>

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

Thanks!

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

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

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

@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.

check this doc. http://ionicframework.com/docs/native/keyboard/

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

and add provider for plugin like this

providers: [
    ...
    Keyboard
    ...
  ]

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

1 Like

@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?

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);
  }
}

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 { }

{
  "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"
}

Please try this solution, Keyboard hides input until I start typing

1 Like

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

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

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

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

Thanks!

1 Like

Keep up the good work. :rofl:

Worked for me, thanks.

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

4 Likes

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" />

2 Likes

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.

1 Like

@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…

You saved my day! Thank you.

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?