Is there anyway to have a textarea “autofit” heigh

Question

Is there anyway through CSS or Javascript set the height of the textarea based on the content? I have a hardcoded height in my CSS but i wanted it to default so there is no vertical scroll bar on page load?

Answer 1

This other question about WhatsApp like input has been incorrectly marked as a duplicate of this current question. As I cannot answer there, I'm answering it here.

I was trying to create a WhatsApp like input area, with the following features:

1. The div/textarea should expand upwards when the content exceeds 4em
2. Max height of the div/textarea should be 6em
3. The messaging area (above the div/textarea) should reduce i.e. its scrollbar thumbtack size should change.

Here is my pure CSS solution, if anyone is looking for it (like I was a few minutes ago).

.arena {
  position: absolute;
  height: 20em;
  width: 12em;
  background-color: #efefef;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.messages {
  padding: 0.2em;
  height: 5em;
  flex: 1 1 0;
  overflow: auto;
}
.content {
  background-color: teal;  
  height: 20em;
}
.footer {
  position: relative;
  background-color: #cdcdcd;
  padding: 0.2em;
}
.editable {
  outline: none;
  max-height: 6em;
  min-height: 4em;
  overflow: auto;
  width: 80%;
  background-color: #fff;
}

<div class="arena">
  <div class="messages">
    <div class="content"></div>
  </div>
  <div class="footer">
    <div class="editable" contenteditable="true"></div>
  </div>
</div>

Answer 2

This work for me

$(function(){
    $('body').on('keydown','textarea', function(event) {
        if ($('textarea')[0].clientHeight < $('textarea')[0].scrollHeight)
        {
            $('textarea').css({'height': $('textarea')[0].scrollHeight+"px"});
        }
        else
        {
            // reset height to default value
            $('textarea').css({'height': ''});
        }
    });
});

Answer 3

How about http://www.jacklmoore.com/autosize/ Drop Autosize into any web page and it should Just Work. The source is short and well commented if you are curious to how it works.

// Example:
$(document).ready(function(){
    $('textarea').autosize();   
});

Source: https://github.com/jackmoore/autosize

Demo: http://www.jacklmoore.com/autosize/

Answer 4

Without plugins you could do something like

$(document).ready(function(){
  elem=document.getElementById('#elemid');
  while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)}
});

Resizing the textarea while it does have a scrollbar (so elem.clientHeight < elem.scrollHeight). You can do it quite easily even without JQuery, in plain javascript.

Didn't test the code, it's just the "concept".

EDIT: Dumb me, it's much easier, no loops...

if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px";

Answer 5

Hey can go with ExpandingTextArea plugin in which an invisible clone pre element is maintained behind your textarea. Whenever the height of this pre changes, the textarea is updated.

It is simple just include "expanding.js" and "jQuery" in your page and add class "expanding" to the textarea to which u need to expand.

<script src='expanding.js'></script>
<textarea class='expanding'></textarea>

Follow the link for more details and Demo

Note: It will work on document load for already added texts

Answer 6

You can use the auto resize plugin using the jQuery UI Autoresize

Here is the html,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
 src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script>
<textarea></textarea>

and here is the jquery,

$('textarea').autoResize();

see DEMO