window.resize due to virtual keyboard causes issues with jquery mobile

Question

I\'m hitting an unusual problem and I\'m looking for suggestions. Basically, I\'m using:

• JQuery Mobile 1.1
• JQuery 8.2
• PhoneGap (Cordova) 2.1

Answer 1

I had a similar issue try this:

  $('#main-browse').bind("orientationchange", function(event) {
    //Put the page dimensions for example with minimum height property

  }

Answer 2

go to your androidmanifest file and in the activity, change or update to this value android:windowSoftInputMode="adjustResize"

i know for a fact that adjustPan breaks the page so the controls are hidden. the default (unspecified) may be ok and there are other options here. i think if it is not to resize, it does not communicate to jqm that kb is shown

so leave jqm as is, without your changes and it will do its job btw, i am using cordova 2.2, jqm 1.2 and jquery 1.8.2

Answer 3

I was having the same issue in Cordova (3.x) using JQuery Mobile 1.4--so this isn't something likely to be addressed by the authors of the library. I tried many different solutions--but none really fixed it. The closest candidate involved binding simple handlers bound to the "throttleresize" and "pageshow" events on the window and document objects, respectively.

Yet, I still lost the "locked down" feel of the UI and the user could drag my entire UI up after the keyboard exited. Sure the header and footer did not move, but my background and the main content area were now draggable, and scroll bars appeared. Totally unacceptable if you are trying for that native app feel...

So I decided to look in Chrome/Safari firebug and find out where the extra pixels are being added to the box model. Oddly, I noticed it isn't the height being changed at all, in my case it was the padding on the active page. so I adapted a solution from another Stack posting:

function resetActivePageHeight() {
var aPage = $( "." + $.mobile.activePageClass ),
  aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
  aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),
  aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),
  aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) );
aPage.css( "min-height", deviceInfo.height - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB )
.css("top","0px").css("padding","0px");}

Then I bound them to the document and window events on device ready.

  $( document ).bind( "pageshow", resetActivePageHeight );
  $( window ).bind( "throttledresize", resetActivePageHeight );

Again, although i would like to take credit, I think I just found an additional angle to someone else's good idea.

Answer 4

I had a problem where the virtual keyboard would extend the viewport, showing the contents underneath(an external panel).

I solved by setting the css height based on the window height:

$('#page').css('height', $(window).height());

Answer 5

I'm glad to see I'm not crazy! I'm happy to report I've implemented a pretty good solution. Here are the steps, in case you'd like to do the same:

1) Go into jquery.mobile-1.x.x.js

2) Find $.mobile = $.extend() and add the following attributes:

last_width: null,
last_height: null,

3) Modify getScreenHeight to work as follows:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}

Basically this will prevent jQuery from recalculating the page height unless the width also changes. (i.e. an orientation change) Since the soft keyboard only affects the height, this method will returned the cached value instead of a modified height.

I'm going to create a separate post to ask how to properly override the $.mobile.getScreenHeight method. I tried adding the code below into a separate JS file, but it didn't work:

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   ... the code listed above
}

It fired most of the time, but also fired the original function. Kinda weird. I've posted a separate topic in regard to how to properly extend $.mobile here: Proper way to overide a JQuery Mobile method in $.mobile