CODEWITHSUNDEEP
javascripthtmlioscsscordova
waymondo
waymondo

Reputation: 335

Cordova/Phonegap 3.4.0 iOS 7.1 - Keyboard / Web View issue

I've been struggling with this issue for over a week now and would really appreciate any help I can get. I'll explain the issue as I understand it but please correct if I say anything incorrect.

In iOS 7.0.x, when the keyboard became revealed, the web view was resized so that the area that the keyboard took was not considered part of the viewport window size. Up until 7.0, the Cordova Keyboard plugin handled this web view resizing. Since 7.0 natively handled the keyboard reveal in the desired way, the Keyboard shrinkView option for the config.xml file became a "No-op" as of this commit:

https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a

However, in 7.1, the area the keyboard occupies comes up over the web view. This has a painful side-effect. Say you want to prepend a <div> to the body with a textarea area (like leaving a comment or chat reply), ie;

<body>
  <div id="app">...</div>
  <div id="reply">
    <textarea></textarea>
  </div>
</body>

example CSS:

body {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}
#reply {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

Whenever you focus or input into the textarea, the web view will natively re-center the input field. Since the web view still takes the entire height of the screen into account, the div will not stay fixed to the bottom and thus breaks the layout.

I've tried the following things:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" />

I'm using Cordova 3.4.0-0.1.3

Has anyone else experienced this issue? Any solutions or ideas?

Upvotes: 16

Views: 5431

Answers (4)

TWilly
TWilly

Reputation: 4943

It looks like Ionic has a multipart solution to this problem which includes dynamically updating the meta viewport tag depending on the device and also by hooking into the keyboard hide/show event and then using their scrolling framework to scroll the input into view.

More info here.. http://ionicframework.com/blog/ionic-keyboard/

This requires you to use their framework so I'm in the process of porting this over to JQuery and IScroll and I'll keep you updated on my progress.

I also posted my experiences with the phonegap keyboard on the phonegap forum but have not had much response yet. https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c

Upvotes: 2

RobinCominotto
RobinCominotto

Reputation: 959

Does this solve your issue?

Check your html meta tags for something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

Replace it with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Upvotes: 1

unboundev
unboundev

Reputation: 357

A quick fix for me involved forcing the window to scroll back into position when the input looses focus:

$("input").on('blur',function(){

 //set brief timeout to let window catch up
 setTimout(function(){

   //reposition at top left corner of screen
   window.scrollTo(0,0);

 },20); 

});

Hope that helps!

Upvotes: 2

Abdul Hafeez
Abdul Hafeez

Reputation: 646

I am experiencing somewhat similar issue. I have a cordova 3.3.0 app in combination with Sencha Touch.

The problem I was facing before iOS 7.0 was that the title bar went beyond the top of screen when the keyboard came up. The keyboard simply used to push the whole viewport up. After a lot of search and hard work, I was able to partially fix the issue by implementing a counter animation to move the title bar down while the keyboard was rising, using the focus and blur events of the textfield.

iOS 7.0 came as a happy surprise as it fixed this issue natively. I commented out my fix (fortunately, did not delete) and the title bar remained fixed at the top without any extra effort.

It seems iOS 7.1 has reverted that fix (wonder why??). When I updated to iOS 7.1, the title bar issue returned and I have now no choice but to uncomment the clumsy fix. Can anybody give some better or permanent solution to fix this problem?

Upvotes: 1

Related Questions