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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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.

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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?

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()">

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

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.