Search jQuery

jQuery Forum

Gap above keyboard in iOS 5 and RC 1.1.0

in jQuery Mobile • 11 years ago

Apologies if this has already been reported...

In iOS 5, using the jQMobile 1.1.0 RC-1 candidate, I have an odd spacing issue with the way the footer appears on the page's first load. Below is a really basic HTML page that demonstrates it.

What happens is that, when I first load this page, and I click on the text field to enter text, the keyboard pops up, and the footer moves upwards to float above the keyboard (like it should), but it has a relatively large gap in between the two, probably 50-70px or so. If I hit Done on the keyboard, and then do it again, the gap goes away. This isn't a problem in Android, where it seems to stay stuck at the top of the keyboard.

Just wanted to post this in case it hasn't been seen before.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Title</title>
<link href="styles/jquery.mobile-1.1.0-rc.1.css" rel="stylesheet" type="text/css"/>
<script src="scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.1.0-rc.1.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1" data-title="Page">
<div data-role="header" data-position="fixed">
<h1 id="name_header"></h1>
</div>
<div data-role="content">
<div name="holder" id="holder" >
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="footer">
<div class="" id="notification">
<p class="noti_ph_text">Placeholder text</p>
</div>
<div data-role="fieldcontainer" class="ui-hide-label ui-body-c">
<form id="new_form" action="" method="">
<div>
<fieldset class="ui-grid-a">
<div class="ui-block-a text_field">
<label for="new_text">New Text:</label>
<textarea id="new_text" name="new_text" class="text_input" placeholder="Enter text"></textarea>
</div>
<div class="ui-block-b send_btn"> <span class="text_send_btn" id="sendBtn">
<input id="submitBtn" type="button" value="Send" data-role="button" data-inline="true" data-theme="b" />
</span> </div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

Response title

Attachments

jQuery Forum

Gap above keyboard in iOS 5 and RC 1.1.0

Statistics

Tags

Actions