Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-11901

Ionic 2 In App Browser hides accessory bar by default

    XMLWordPrintableJSON

Details

    Description

      0
      down vote
      favorite
      I made my very first iOS app, but I'm having a problem with the keyboard. There is no way you can hide the keyboard. The accessorybar (with close/previous/next arrow) is not visible.

      And another problem is that it does not close automatically after login. So the user ends up with a keyboard all over his screen. It only closes when you navigate inside the site.

      the code is quite easy though, the app opens up the InAppBrowser and loads up a site where you need to login.

      When clicked on login textfield: http://i.stack.imgur.com/kydAC.jpg
      After login, keyboard stays open: http://i.stack.imgur.com/9JgEy.png

      Code sample:
      import

      {Component, ViewChild}

      from '@angular/core';
      import

      {ionicBootstrap, Platform, MenuController, Nav}

      from 'ionic-angular';
      import

      {StatusBar}

      from 'ionic-native';
      import

      {HelloIonicPage}

      from './pages/hello-ionic/hello-ionic';
      import

      {ListPage}

      from './pages/list/list';
      import

      {InfoPage}

      from './pages/info/info';
      import

      {InAppBrowser}

      from 'ionic-native';
      import

      {Splashscreen}

      from 'ionic-native';
      import

      {Keyboard}

      from 'ionic-native';

      @Component({
      templateUrl: 'build/app.html'
      })
      class MyApp {
      @ViewChild(Nav) nav: Nav;

      // make HelloIonicPage the root (or first) page
      rootPage: any = HelloIonicPage;
      pages: Array<

      {title: string, component: any}

      >;
      inAppBrowserRef;

      constructor(
      private platform: Platform,
      private menu: MenuController
      ) {
      document.addEventListener('resume', () =>

      { console.log("App has been resumed, reopen InAppBrowser url"); this.openInAppBrowser(); }

      );
      this.initializeApp();

      // set our app's pages
      this.pages = [

      { title: 'Launch', component: HelloIonicPage }

      ,

      { title: 'Info', component: InfoPage }

      ,
      ];
      }

      initializeApp() {
      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. StatusBar.styleDefault(); //Show previous/next/done button on keyboard this.openInAppBrowser(); }

      );
      }

      openInAppBrowser()

      { //Directly load website this.inAppBrowserRef = InAppBrowser.open("http://ws001.domeassistance.be:50001/", "_blank", "location=no,fullscreen=yes,toolbar=no,clearcache=yes,clearsessioncache=yes"); }

      }

      ionicBootstrap(MyApp);

      Another mystery: when debugging with Phonegap on iOS I DO get the accessorybar, but not when i've build it into a real App?

      URL to test yourself:
      https://itunes.apple.com/us/app/dome-assistance-app/id1135786020?mt=8

      Attachments

        Activity

          People

            jcesarmobile jcesarmobile
            saibot tobias
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: