Response title
This is preview!
textarea expansion in fixed footer causes footer to scroll off bottom
in jQuery Mobile
•
11 years ago
Hi all,
I placed a textarea in a form inside a fixed footer, essentially replicating the text message entry look and feel of the iPhone. I used an input of type text originally, but that doesn't expand in height dynamically so users can't see what they're sending if it goes beyond a certain length. I switched to a textarea, but now when the user goes beyond the original size, the fixed footer scrolls downward and off the bottom of the screen. If I scroll the screen at all, it repositions correctly with textarea expanding upwards. Based on looking at the jquery mobile javascript, I think it's increasing the size of the textarea without making any commensurate adjustments to the footer or the rest of the page, and maybe triggering that will fix the issue.
HTML below.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Page</title>
<link href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css"/>
<script src="jquery.mobile-1.0.1/jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="main_page" data-title="">
<div data-role="header" data-position="fixed"> <a href="" data-icon="arrow-l" data-theme="c" class="ui-btn-left" data-rel="back" data-ajax="false"> </a>
<h1 id="name">Name</h1>
<div data-role="content">
<div name="msgs" id="msgs">
<!-- stuff is dynamically added here in simple <p> elements -->
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="footer">
<div class="" id="status">
<p class="status">Placeholder text</p>
</div>
<div data-role="fieldcontainer" class="ui-hide-label ui-body-c">
<form id="form" action="message" method="post">
<div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<label for="new_msg_text">New Message:</label>
<textarea id="new_msg_text" placeholder="Enter message"></textarea>
</div>
<div class="ui-block-b">
<span class="msg_text_send_btn">
<button type="submit" data-theme="b">Send</button>
</span> </div>
</fieldset>
</div>
</form>
</div>
<div data-role="navbar">
<ul>
<li><a href="home.html" class="ui-btn-active ui-state-persist">Home</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
The relevant section of the jQuery Mobile Javascript is pasted below (v 1.0.1, starting at line 5474). I've added a comment where I think there needs to be something added to move the textarea upwards by extraLineHeight, or force refresh of the page element, but don't know enough about the jQuery script to figure out what that change should be. I tried sticking in input.trigger("change"); there, but without any luck.
// Autogrow
if ( input.is( "textarea" ) ) {
var extraLineHeight = 15,
keyupTimeoutBuffer = 100,
keyup = function() {
var scrollHeight = input[ 0 ].scrollHeight,
clientHeight = input[ 0 ].clientHeight;
if ( clientHeight < scrollHeight ) {
input.height(scrollHeight + extraLineHeight);
// I think there needs to be something here to move this upwards
}
},
keyupTimeout;
input.keyup(function() {
clearTimeout( keyupTimeout );
keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
});
// binding to pagechange here ensures that for pages loaded via
// ajax the height is recalculated without user input
$( document ).one( "pagechange", keyup );
// Issue 509: the browser is not providing scrollHeight properly until the styles load
if ( $.trim( input.val() ) ) {
// bind to the window load to make sure the height is calculated based on BOTH
// the DOM and CSS
$( window ).load( keyup );
}
}
Anyone have thoughts? I tried sticking in input.trigger("change"); there, but without any luck.
Thanks in advance!
Mike
I placed a textarea in a form inside a fixed footer, essentially replicating the text message entry look and feel of the iPhone. I used an input of type text originally, but that doesn't expand in height dynamically so users can't see what they're sending if it goes beyond a certain length. I switched to a textarea, but now when the user goes beyond the original size, the fixed footer scrolls downward and off the bottom of the screen. If I scroll the screen at all, it repositions correctly with textarea expanding upwards. Based on looking at the jquery mobile javascript, I think it's increasing the size of the textarea without making any commensurate adjustments to the footer or the rest of the page, and maybe triggering that will fix the issue.
HTML below.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Page</title>
<link href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css"/>
<script src="jquery.mobile-1.0.1/jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="main_page" data-title="">
<div data-role="header" data-position="fixed"> <a href="" data-icon="arrow-l" data-theme="c" class="ui-btn-left" data-rel="back" data-ajax="false"> </a>
<h1 id="name">Name</h1>
<div data-role="content">
<div name="msgs" id="msgs">
<!-- stuff is dynamically added here in simple <p> elements -->
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="footer">
<div class="" id="status">
<p class="status">Placeholder text</p>
</div>
<div data-role="fieldcontainer" class="ui-hide-label ui-body-c">
<form id="form" action="message" method="post">
<div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<label for="new_msg_text">New Message:</label>
<textarea id="new_msg_text" placeholder="Enter message"></textarea>
</div>
<div class="ui-block-b">
<span class="msg_text_send_btn">
<button type="submit" data-theme="b">Send</button>
</span> </div>
</fieldset>
</div>
</form>
</div>
<div data-role="navbar">
<ul>
<li><a href="home.html" class="ui-btn-active ui-state-persist">Home</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
The relevant section of the jQuery Mobile Javascript is pasted below (v 1.0.1, starting at line 5474). I've added a comment where I think there needs to be something added to move the textarea upwards by extraLineHeight, or force refresh of the page element, but don't know enough about the jQuery script to figure out what that change should be. I tried sticking in input.trigger("change"); there, but without any luck.
// Autogrow
if ( input.is( "textarea" ) ) {
var extraLineHeight = 15,
keyupTimeoutBuffer = 100,
keyup = function() {
var scrollHeight = input[ 0 ].scrollHeight,
clientHeight = input[ 0 ].clientHeight;
if ( clientHeight < scrollHeight ) {
input.height(scrollHeight + extraLineHeight);
// I think there needs to be something here to move this upwards
}
},
keyupTimeout;
input.keyup(function() {
clearTimeout( keyupTimeout );
keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
});
// binding to pagechange here ensures that for pages loaded via
// ajax the height is recalculated without user input
$( document ).one( "pagechange", keyup );
// Issue 509: the browser is not providing scrollHeight properly until the styles load
if ( $.trim( input.val() ) ) {
// bind to the window load to make sure the height is calculated based on BOTH
// the DOM and CSS
$( window ).load( keyup );
}
}
Anyone have thoughts? I tried sticking in input.trigger("change"); there, but without any luck.
Thanks in advance!
Mike
1