Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Expandable textarea

Posted on 2004-10-25
Medium Priority
Last Modified: 2011-09-20

   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.

Question by:Keys916
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 53

Expert Comment

ID: 12405072
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:



Expert Comment

ID: 12405368
Text boxes can be expanded but not textareas.  Try this - http://www.flws.com.au/showusyourcode/codeLib/code/dynamicLength.asp?catID=2
LVL 18

Expert Comment

ID: 12411196
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.

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 13

Expert Comment

ID: 12414596
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>



Author Comment

ID: 12415480
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?

LVL 13

Accepted Solution

cLFlaVA earned 1000 total points
ID: 12416562
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()">

Expert Comment

ID: 12507913
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question