This is a PlayBook matter. Attached below is a screenshot. Note the bottom toolbar showing up right above the keyboard. That toolbar should be hidden underneath the keyboard. It is pushed up each time the keyboard popups up. I've also attached below a second screenshot showing the normal screen when no input is active.
For Android, I had the same issue, and this posting fixed the issue: https://groups.google.com/forum/?fromgroups=#!topi
Is there something similar in the PlayBook WebWorks framework that makes sure the keyboard can be overlayed?
I've attached at the very end my index.html. Am I doing something incorrectly with the viewport information line?
<!DOCTYPE html>
<html>
<head>
<title>TouchTax - Mobile Tax Code and Regulations</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script src="enyo/enyo.js"></script>
<script src="source/package.js" type="text/javascript"></script>
</head>
<body onload="init()" class="enyo-unselectable">
<script> new App().renderInto(document.body); </script>
</body>
</html>
My guess is that your bottom toolbar is positioned using absolute css positioning. It is also probably absolutely positioned based on bottom: 0; as opposed to top: 550px.
I did a quick test and changing the div positioning from bottom to top should prevent the div from jumping up when the keyboard is displayed.
Let me know if this works for you.
Cheers,
James
P.S. Your app looks great!
