In my jquery mobile application, I am facing an issue with a fixed header and footer. Whenever I click on the screen, the fixed header and footer get displaced and are no longer fixed. I am unsure how to resolve this bug. Any suggestions on how to fix it would be greatly appreciated. I have created a JSFiddle for reference.
<div style="height:100%; width:100%" class="ui-page" data-role="page" data-position="fixed" id="main">
<div style="height:10%"" data-role="header" data-position="fixed">
<a class="ui-btn-left" name="backo" data-icon="back" data-rel="button" ></a>
<h1>title</h1>
</div>
<div style="height:100%; width:100%" data-role="content" id="container">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<div style="width:95%;padding-right:5%;" id="chatOutput">
</div>
</ul>
<div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">
<div style="width:96%;padding-right:2%;padding-left:2%" class="ui-grid-a">
<div style="height:100%;width:80%" class="ui-block-a"><input type="text" id="chatText" paceholder="type your text here"></div>
<div style="height:100%;width:20%" class="ui-block-b"><button style="font-size:90%" class="ui-btn ui-shadow ui-icon-carat-r" id="chatSend">send</button></div></div>
</div>
</div>
</div>
EDIT: After some research, I came across this solution:
$("[data-role=header]").toolbar({ tapToggle: false });