Expandable textarea


   I am trying to create a textarea that gets data from a db and expands to accomodate the data without scrolling, but still wrapping the text so that all is visible on the screen at the same time.  The page works well as far as the data retrieval goes, but I have tried several different CSS tags, as well as standard stuff, and I cannot make this work.  I am only concerned with IE 5.5+ compatability.  The server language is ColdFusion.

Who is Participating?
cLFlaVAConnect With a Mentor Commented:
If the text area will be loaded with text already in it, you could use the function I provided.  Just call it in the body's onload event:

<body onload="expandTA()">
A textarea does not size to content and there in no property or attribute that will change that.  If the content does not need to be modified then use a dive ro present it and it will size to content.  If the user must be able to modify the content and you do not have security concerns then a contenteditable div might be and option:


Text boxes can be expanded but not textareas.  Try this - http://www.flws.com.au/showusyourcode/codeLib/code/dynamicLength.asp?catID=2
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

This is the closest you can get.  Sizes width to the size of your window, set the height to what you want.
Text wrap is set to virtual, meaning the wrap displays on the screen but the line breaks are not inserted in the data.


<textarea rows="" cols="" style="width: 100%; height: 30em;" wrap="virtual">
Lorem ipsum dolor sit amet, wisi posuere aliquam ligula enim venenatis. Hymenaeos est eros fermentum. Sed cursus id sem. Class ac tristique ac fusce at facilisi. Faucibus inceptos. Laoreet ultricies eros in nonummy eu quis. Augue mus.
Praesent, nibh placerat. Rutrum cras nonummy sagittis luctus pharetra, augue in cubilia in sagittis nostra integer duis molestie penatibus. Vel hendrerit accumsan magnis lectus. Felis, eu euismod a ipsum. Morbi nonummy. Etiam pede ipsum justo aliquet. Leo justo nam.
Platea aptent imperdiet posuere mus senectus et erat cras mus montes cubilia venenatis mollis urna mattis. Molestie ipsum cum vehicula sociis dignissim cubilia suscipit odio nam ipsum purus netus condimentum scelerisque vestibulum. Sagittis augue. Nunc cum at, nibh phasellus. Senectus magnis. Orci natoque arcu sociis potenti. Et feugiat.
Lacus, ac semper. Nonummy felis vestibulum. Congue non molestie, sapien nibh. Augue erat sollicitudin praesent senectus. Molestie sit. Curabitur duis pede, netus egestas lorem. Auctor cras.

Maybe I misunderstand, but is this what you're looking for?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>new document</title>

<script language="javascript" type="text/javascript">
function expandTA() {
    var ta = document.forms['the_form'].elements['ta'];
    var l = ta.value.split('\n').length;
    ta.rows = l > ta.rows ? l : ta.rows;



<form name="the_form">
  <textarea name="ta" rows="5" cols="50" onkeyup="expandTA();" wrap="off"></textarea>


Keys916Author Commented:
Hi All,

    The link Nan1217 posted leads to the right idea -- however, I'm not too well-versed in JavaScript.  I want the textarea yo resize immediately upon the page loading, rather than when someone clicks in it -- is there a way to do this?

I had a similar situation, but  I need it to resize the textarea to the width of the browser. I did this in a PHP file using javascript. You can adapt to another script language.

echo "<script language=\"JavaScript\">";
echo "height = document.body.offsetHeight, width = document.body.offsetWidth;"; // IE width and Height
echo "width2 = Math.floor(width/10);";
echo "document.writeln('<textarea cols=\"'+width2+'\" rows=\"20\" name=texto id=\"textarea1\" wrap=\"soft\" id=\"textarea1\">');";
echo "</script>$texto</textarea>";

If yow know the number of chars in the text and you mantain constant your width, you can determine the number of rows that your textbox needs for displaying all your text.

Hope this works
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.