I have a phonegap app whose basic layout is controlled by translating divs when certain items are clicked. A shortened version looks like this:
HTML
<body>
<h1 class="main">
The Market Coffee Cart
</h1>
<div class="app">
<div id="home" class="page">
<p> Welcome to the market coffee cart</p>
<!-- <div class="leftHalf"> Login</div> -->
<div class="guestLogin"> Continue as Guest</div>
</div>
<!-- KIND -->
<div id="itemType" class="page right">
<p>What would you like to order?</p>
<div id="coffee" class="type">
Coffee
</div>
<div id="tea" class="type">
Tea
</div>
<div id="others" class="type">
Soda and specialties
</div>
<div id="snack" class="type">
Snacks
</div>
</div>
</body>
The css, which is really responsible for showing and hiding things look like this:
CSS
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.page.center {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.page.transition {
-webkit-transition: .25s;
transition-duration: .25s;
}
The issue I am having is that on some of my pages text input is required. When the text box gains focus the content is shifted to the left and my layout is ruined. See photos. How can I prevent this?
NOTE
I have already tried the solutions from here, and here here but they have no effect. They were to add <preference name="KeyboardShrinksView" value="false" /> and <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/> but this does nothing. Interestingly, everyone warns against setting the last property but i tried it anyway, to no avail.
Here is how I would like it to look: 
and here is how it does look once the keyboard has appeared (and then hidden itself): 
Any ideas would be greatly appreciated.
