I am working on a phonegap application for IOS and I came across a problem.
Every time I open the keyboard and tap above it to close it it leaves a large white block on my screen.
As you can see in the gif above it is easily repairable by exiting the keyboard using the "done" button, but I like to have the same behavior when tapping on "zoek dossiers" for instance..
I think this is something that has to be solved in the xCode files instead of the html but here is my page anyway.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/assyst_app.js"></script>
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
</head>
<header>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left transitions" id="cbp-spmenu-s1">
<a id="su">Instellingen<span id="navIcon" class="icon-cog"></span></a>
<a id="lo">Log uit<span id="navIcon" class="icon-logout"></span></a>
</nav>
<div class="navBar">
<button class="navBut bgCol" id="showLeft" ><span class="icon-menu"></span></button>
<div id="content"></div>
</div>
</header>
<body onLoad="onLoadHolder()">
<div id="art">
<article id="relCont"> <!-- Phone -->
<form id="dossier-zoek">
<input type="text" id="sea" name="search" class="regTXTBOX brdrCol" placeholder="Zoek">
<button id="searchDos" class="bgCol">Zoek dossiers</button>
</form>
<h2 id="title" style="position:fixed; width:100%;" class="brdrCol txtCol">$!template.dossiers.list_title</h2>
<div id="list" class="listDos">
<table class="defTABLE">
#foreach($row in $template.dossiers.data.records)
<tr class="defTR">
<td class="defTD">$!row.dossiernummer_c</td>
<td class="defTD">$!row.inzake_c</td>
<td class="defTD tableLink"><div class="icon-gt txtCol" id="$!row.dossier_id"></div></td>
</tr>
#end
</table>
</div>
</article>
</div>
<script>
$(document).ready(onShowHolder());
</script>
</body>
</html>
Does anyone know how to solve this problem? I tried adding the meta tags for scaling but it didn't help.
I am using phonegap to build this app.
