...

View Full Version : "height:auto" in textareas



beerspice
08-04-2006, 07:15 PM
I'm trying to set the height of a textarea so all its content displays without scrolling. (The height doesn't need to adjust dynamically as the user types -- it's just the initial text string I'm worried about.)

Using "height:auto" seems to work fine in IE. But in Firefox, the textareas are all about four rows high, whether the text string takes up one row or ten.

What am I doing wrong?


<html>
<head>
<style type="text/css">
textarea.autosize {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 300px;
height: auto;
overflow: visible;
}
</style>
</head>

<body style="background-color: #E4ECED">

<textarea class="autosize">Cuban leader Fidel Castro says he is in a stable condition and good spirits following surgery, according to a statement read on Cuban TV. "I feel perfectly fine," Mr Castro was quoted as saying. On Monday he handed power temporarily to his brother Raul, to recover from his treatment for internal bleeding.</textarea>
<br>

<textarea class="autosize">Castro in hospital.</textarea>

</body>
</html>

beerspice
08-09-2006, 02:46 PM
I'm totally pulling my hair out over this one. Any ideas out there?

Here's what I'm trying to get (and what IE's doing):
http://www.140fulton.com/textareaHeightProb_ie.gif

But here's what I'm getting in Firefox:
http://www.140fulton.com/textareaHeightProb_ff.gif

Am I expecting the wrong thing from "height:auto"? Is this something Firefox just won't do?

_Aerospace_Eng_
08-09-2006, 02:56 PM
Hmm not sure why its doing that. I've always just set a height on the textarea. Would you be interested in a JS solution?

beerspice
08-09-2006, 03:16 PM
Sure -- Javascript would be great.

_Aerospace_Eng_
08-09-2006, 03:21 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
background: #E4ECED;
color: #000;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
textarea.autosize {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 300px;
height:auto;
overflow: visible;
background:#FFF;
color: #000;
border:0;
}
#text1, #text2 {
display:none;
visibility:hidden;
width:300px;
}
</style>
<script type="text/javascript">
var styles = document.createElement('style');
var stylesprop = document.createTextNode('#text1, #text2 { display:block; }');
styles.appendChild(stylesprop);
document.getElementsByTagName('head')[0].appendChild(styles);

window.onload = function()
{
document.getElementById('text1').firstChild.nodeValue = document.forms[0].comments1.value;
document.getElementById('comments1').style.height = document.getElementById('text1').offsetHeight + 'px';
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').firstChild.nodeValue = document.forms[0].comments2.value;
document.getElementById('comments2').style.height = document.getElementById('text2').offsetHeight + 'px';
document.getElementById('text2').style.display = 'none';
}
</script>
</head>
<body>
<form action="#" method="post">
<textarea name="comments1" id="comments1" class="autosize" rows="3" cols="10">Cuban leader Fidel Castro says he is in a stable condition and good spirits following surgery, according to a statement read on Cuban TV. "I feel perfectly fine," Mr Castro was quoted as saying. On Monday he handed power temporarily to his brother Raul, to recover from his treatment for internal bleeding.</textarea>
<div id="text1">&nbsp;</div>
<br>
<textarea name="comments2" id="comments2" class="autosize" rows="3" cols="10">Castro in hospital.</textarea>
<div id="text2">&nbsp;</div>
</form>
</body>
</html>

I put the default value of the textarea into the div that is there but not visible. I have it set to display:none; I then use JS to make it display:block; so the divs won't be there when the user has JS disabled. If JS is enabled the textareas will resize fine, if JS is disabled the user will get a normal textarea.

beerspice
08-09-2006, 03:49 PM
Hallelujia! The javascript solution works wonderfully! Many, many thanks! :)

nordmats
12-12-2008, 12:29 PM
Sorry to revive such an old thread but I need help.

I have implemented this on a web page and it works only in IE. In Firefox it shows the textareas with 3 rows always.

Code:
<style>
textarea.autosize {
width:100%;
/* height:auto; */
overflow: visible;}
div.autotext {
display:none;
visibility:hidden;
font-size: 10pt;
font-family: &quot;Lucida Console&quot;;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
width: 99%;
word-wrap: break-word; /* Internet Explorer 5.5+ */}
</style>



<script type="text/javascript">

var styles = document.createElement('style');
var stylesprop = document.createTextNode('#text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8 { display:block; }');
styles.appendChild(stylesprop);
document.getElementsByTagName('head')[0].appendChild(styles);

window.onload = function()
{
document.getElementById('text1').firstChild.nodeValue = document.forms[0].desc_text.value;
document.getElementById('desc_text').style.height =
document.getElementById('text1').offsetHeight + 'px';
document.getElementById('text1').style.display = 'none';

document.getElementById('text2').firstChild.nodeValue = document.forms[0].query_text.value;
document.getElementById('query_text').style.height =
document.getElementById('text2').offsetHeight + 'px';
document.getElementById('text2').style.display = 'none';





<span id="detailed_description" style="font-family: &quot;Lucida Console&quot;; margin-bottom:0pt; margin-top:0pt; word-wrap:break-word;">
<textarea readonly name="desc_text" id="desc_text" style="margin-top:2pt; border: 0px solid #000000; font-size: 10pt; font-family: &quot;Lucida Console&quot;;" class="autosize">

</textarea>
<div id="text1" class="autotext">&nbsp;</div>
</span>

_Aerospace_Eng_
12-12-2008, 02:51 PM
A textarea nor a div should be inside of a span. You also need to clean up the whitespace as this adds to actual content within the textarea in Firefox. And you are missing the form that goes around the textarea.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum