Please note this is an HTML issue on mobile web browsers. This is not a nativa app or phonegap app.
Issue Details:
Everytime i touch/click the input textfield android keyboard will toggled and messed up the HTML layout. Once the keyboard toggled, HTML overflow element and body element will moved and scaled and the input box always been covered. I've tried disable all the overflow container and height and it works fine. The browser pushed the content up and the input text field does not covered by the keyboard. Tested on iPad Air and mini, iphone4 it works fine on ios 7 and 8.0.2.
Issue founded on:
Device: Samsung Galaxy Note 3
Operating System: Android Kitkat 4.4.2
Browser: Google Chrome, Firefox
My research conclusion I've done some research and most of the solution that i've found was to do with android manifest xml. and it seems that's a native app solution which i wasn't sure if it works and how it works for web. Please advice. example ref
Target Result:
I need to keep the current layout to have the containers overflow hidden and inner content to be able to scroll plus everytime input field was clicked, it prevent zoom and always on top of the keyboard instead of being covered (at both content and navigation). The result needs to be work on mobile web browsers.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="sticky-bar">
<a id="toggle" href="#">MENU</a>
</div>
<nav id="navigation">
<ul>
<li><h5>SCROLL HERE</h5></li>
<li><a href="#">nav link 1</a></li>
<li><a href="#">nav link 2</a></li>
<li><a href="#">nav link 3</a></li>
<li><a href="#">nav link 4</a></li>
<li><a href="#">nav link 5</a></li>
<li><a href="#">nav link 6</a></li>
<li><a href="#">nav link 7</a></li>
<li><a href="#">nav link 8</a></li>
<li><a href="#">nav link 9</a></li>
<li><a href="#">nav link 10</a></li>
<li><a href="#">nav link 11</a></li>
<li><a href="#">nav link 12</a></li>
<li><a href="#">nav link 13</a></li>
<li><a href="#">nav link 14</a></li>
<li><a href="#">nav link 15</a></li>
<li><a href="#">nav link 16</a></li>
<li><a href="#">nav link 17</a></li>
<li><a href="#">nav link 18</a></li>
<li><a href="#">nav link 19</a></li>
<li><a href="#">nav link 20</a></li>
<li><a href="#">nav link 21</a></li>
<li><a href="#">nav link 22</a></li>
<li><a href="#">nav link 23</a></li>
<li><input type="text" placeholder="enter keywords" /></li>
</ul>
</nav>
<main id="content">
<div id="inner">
<div class="module-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-3">
<h3>Enter the form</h3>
<form>
<label>
<input type="text" placeholder="Enter a value" />
</label>
<input type="submit" value="SUBMIT" />
</form>
</div>
<div class="module-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
</div>
<div class="module-3">
<h3>Enter the form</h3>
<form>
<label>
<input type="text" placeholder="Enter a value" />
</label>
<input type="submit" value="SUBMIT" />
</form>
</div>
</div>
</main>
</div>
</body>
</html>
CSS
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: #f3f3f3;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
#container,
#content,
#inner {
height: 100%;
}
#container {
overflow: hidden;
position: relative;
}
#content {
display: block;
padding-top: 30px;
position: relative;
left: 0;
transform: translate3d(0px, 0, 0);
transition: transform 1s;
z-index: 8;
}
.menu-open #content {
transform: translate3d(150px, 0, 0);
}
#inner {
overflow: auto;
}
#sticky-bar {
position: absolute;
height: 30px;
top: 0;
left: 0;
right: 0;
z-index: 19;
background: orange;
text-align: right;
}
#sticky-bar a {
display: inline-block;
padding: 8px;
font: bold 12px arial;
text-decoration: none;
color: #fff;
background: teal;
}
h5 {
color: orange;
font-size: 15px san-serif;
margin: 0;
}
#navigation {
position: absolute;
top: 0;
padding-top: 30px;
left: 0;
height: 100%;
width: 150px;
background: black;
transition: transform 1s;
transform: translate3d(-100%, 0, 0);
z-index: 9;
}
.menu-open #navigation {
transform: translate3d(0%, 0, 0);
}
#navigation ul {
width: 100%;
height: 100%;
overflow: auto;
list-style: none;
padding: 0;
position: relative;
margin: 0;
}
#navigation ul:before, #navigation ul:after {
display: table;
content: '';
}
#navigation ul:after {
clear: both;
}
#navigation li {
display: block;
padding: 10px 14px;
}
#navigation li:nth-child(even) {
background: yellow;
}
#navigation li:nth-child(even) a {
color: black;
}
#navigation input[type='text'] {
display: inline-block;
width: 100%;
padding: 5px;
border: 0;
outline: 0;
box-shadow: none;
-webkit-appearance: none;
}
#navigation a {
color: #fff;
font: 14px arial;
text-transform: capitalize;
text-decoration: none;
}
.module-1, .module-2, .module-3 {
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px;
background: #666;
color: #fff;
}
.module-2 {
background: #fff;
color: #666;
}
.module-3 {
background: green;
color: #fff;
}
.module-3 input[type='text'] {
font-size: 15px;
}
.module-3 input[type='text']:focus {
font-size: 16px;
}
JS (jQuery)
$(function() {
$('#toggle').on('click', function(e){
e.preventDefault();
$('#container').toggleClass('menu-open');
});
});
