Expandable textarea

Posted on 2004-10-25
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
    LVL 53

    Expert Comment

    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:

    LVL 3

    Expert Comment

    Text boxes can be expanded but not textareas.  Try this -
    LVL 18

    Expert Comment

    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.

    LVL 13

    Expert Comment

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">

    <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

    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

    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

    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Suggested Solutions

    Title # Comments Views Activity
    jquery validation by class 12 39
    Perl 101 11 59
    Google adds suggestions 3 39
    How Do I use CSS to change the first element within a class 4 28
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
    Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    856 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

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now