Whole page shifts up in Android (browser) when beginning to type in a textbox


#1

Context
I have developed an Ionic-based jumbled words game. The game looks great and works perfectly on desktop browser (Chrome). It performs well even with Chrome device emulation (iPhone and Android both). The app is available here.

How it was built
I used Ionic’s navigation example as base to create a very similar looking app. Relevant source code can be seen at:
http://anuragbhandari.com/content/ionic/index.html
and
http://www.anuragbhandari.com/content/ionic/js/main.js

The problem
[In browser (Chrome) on Android] Normally, the view of gameplay looks like this:

But as soon as I tap the textbox to start typing, the keyboard that pops up shifts the whole view above such that the textbox isn’t even visible.

Side question
Is there a way to force the iOS theme on Android rather than letting Ionic automatically select a theme based on platform? Perhaps this problem is specific to the Android theme?


#2

Hello there – Gentle bump.


#3

You might find some clues in this thread:


#4

I’m facing a similar bug, when I open the keyboard in Android, the tabs does not stay behind the keyboard like iOS doing that some elements in the view that need some calculations to position them are placed in wrong positions.


#5

Are you two seeing this once you compile the app?

If you’ve made the project with the ionic cli, you should already have the keyboard plugin added.

If not, add that.

Then disable native overflow scrolling with this.

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      // Set the statusbar to use the default style, tweak this to
      // remove the status bar on iOS or change it to use white instead of dark colors.
      StatusBar.styleDefault();
    }
  });
});

#6

Thanks for the tip. But I did not create the app using cli. I made my app for the purpose of showcasing mobile app development to students, who, in all probability, would not know cli stuff.

I simply included the Ionic CSS/JS bundles in my page, and off I went. The screenshot that I shared in my first post above is the app running in Chrome on Android.

Your code will work only with Cordova. Is there a web-only solution I can try?


#7

Hello. Anyone has any ideas? Thanks.


#8

Have you tried the Android “hacks” mentioned in the keyboard plugin docs?

Android Notes
[…]
You can configure the behavior of the web view when the keyboard shows by setting android:windowSoftInputMode to either adjustPan, adjustResize or adjustNothing in your app’s activity in AndroidManifest.xml. adjustResize is the recommended setting for Ionic, but if for some reason you do use adjustPan you will need to set ionic.Platform.isFullScreen = true

<activity android:windowSoftInputMode="adjustResize">


#9

Probably not, because anurag is interested in a browser-based solution :wink:

[quote=“anurag, post:6, topic:12249”]I simply included the Ionic CSS/JS bundles in my page, and off I went. The screenshot that I shared in my first post above is the app running in Chrome on Android.

Your code will work only with Cordova. Is there a web-only solution I can try?[/quote]


#10

That’s may be some misunderstanding… The topic seemed to me like it was about keyboard plugin which obviously doesn’t work in the web env. Sorry :slight_smile: I can’t help then.


#11

That’s right. I’m looking for a browser-based solution, to put it more clearly :smile:

Perhaps I should modify this thread’s title accordingly.


#12

Yeah if you’re going to be working in a browser, with out any compiled apps, there’s not going to much that we can do.
Ionic is focused on compiled apps because we need some stuff that is done through native plugins