It is possible to expand a textarea only with CSS?

Question

I have a textarea with 200px of height, but when I pass that 200px with text I want to have the textarea expanded instead of keeping the 200px of height with a scroll bar.

It is possible to do that only with CSS?

Answer 1

Instead of textarea , you can use div with contentEditable attribute:

div {
  display: inline-block;
  border: solid 1px #000;
  min-height: 200px;
  width: 300px;
}

<div contentEditable="true"></div>

DEMO

Answer 2

It is possible to make a textarea expandable by the user, using just CSS. In fact, in some modern browsers, such expandability is even the browser default. You can explicitly ask for it:

textarea { resize: both; }

Browser support is growing but is still limited.

There is typically just a small hint about resizability: a resize handle in the lower right corner. And I’m afraid most users won’t understand this hint.

You cannot make a textarea expand automatically by content using just CSS.

Answer 3

No it is not possible to do only with css, but you could use jquery:

$('#your_textarea').on('keydown', function(e){
    var that = $(this);
    if (that.scrollTop()) {
        $(this).height(function(i,h){
            return h + 20;
        });
    }
});

Answer 4

Unfortunately not, but it is very easy with JS:

let el = document.getElementById(`myTextarea`);
el.addEventListener("input", function() {
  if (el.scrollTop != 0)
    el.style.height = el.scrollHeight + "px";
});

In my case I have a list of player names and I am doing this in a loop for each player.

              humansContainer.innerHTML = humans
                .map(
                  (h, i) =>
                    `<div><textarea id="human_${i}" type="text" value="${h}">${h}</textarea></div>`
                )
                .join("");
              humans.forEach((h, i) => {
                let el = document.getElementById(`human_${i}`);
                el.addEventListener("input", function(e) {
                  let name = el.value;
                  if (el.scrollTop != 0)
                    el.style.height = el.scrollHeight + "px";
                  humans[i] = name;
                });
              });

Answer 5

Here's a simple, pure php and html, solution, without need for js, to make the textarea fit to size. HTML: <textarea rows="<?php echo linecount($sometext, 100, 3);?>" cols="100" name="sometext"><?php echo $sometext;?></textarea>

    <?php
   /* (c)MyWeb.cool, 2014
   * -------------------------------------------------------------------------
   *Calculate number of rows in a textarea.
   *  Parms :   $text:      The contents of a textarea,
   *            $cols:      Number of columns in the textarea,
   *            $minrows:   Minimum number of rows in the textarea,
   *  Return:   $row:       The number of in textarea.
   * ---------------------------------------------------------------------- */
   function linecount($text, $cols, $minrows=1) {
   // Return minimum, if empty`
   if ($text <= '') {
    return $minrows;
   }
   // Calculate the amount of characters
   $rows = floor(strlen($text) / $cols)+1; 
   // Calculate the number of line-breaks
   $breaks = substr_count( $text, PHP_EOL );
   $rows = $rows + $breaks;
   if ($minrows >= $rows)   {
    $rows = $minrows;
   }
   // Return the number of rows
   return $rows;
   }
   ?> 

`And this one is even shorter and better:

function linecount($text, $cols, $minrows=1) {
    if ($text <= '') {return $minrows;}
    $text = wordwrap($text, $cols, PHP_EOL);
    $rows = substr_count( $text, PHP_EOL )+1;
    if ($minrows >= $rows) {$rows = $minrows;}
    return $rows;
}
?>