CODEWITHSUNDEEP
htmlcsstextarea
Darkenwolf
Darkenwolf

Reputation: 425

Can I make a textarea grow with text to a max height?

I'm working on a project where I have data in divs that can be various sizes. When a user clicks on one of the divs, it needs to turn into an editable textarea. The width is constant, but I'd like the height to start as the height of the original div and then grow to a max height before adding a scrollbar. Is that possible?

Upvotes: 36

Views: 62345

Answers (6)

Martin
Martin

Reputation: 6172

The field-sizing CSS property (at the time of writing: supported by Chrome and Edge, not yet supported by Firefox or Safari) solves the problem without needing a custom solution.

You have to decide for yourself if the limited browser support is a no-go or if it is good enough for your use-case; you could add resize: vertical; additionally to the textarea so users on Chrome/Edge can benefit from auto-growing, and the other users will still be able to resize the field to view the content without scrollbars.

The textarea can grow with its content:

.growing-textarea {
  field-sizing: content;
}

...or even be resizable in height:

.growing-textarea {
  field-sizing: content;
  resize: vertical;
}

Related links:

Upvotes: 3

PC help
PC help

Reputation: 1

I know that this question is fairly old, but a trick that I have used to dynamically scale textarea is to check if the scrollTop of the textarea element is more than zero since that would mean that it's scrollable. In the event that it's scrollable, simply increment the rows in a while loop while the scrollTop is more than zero...

if(textarea.scrollTop>0){
            while(textarea.scrollTop>0){
                textarea.rows++;
            }
        }

Upvotes: 0

GavinGoGaming
GavinGoGaming

Reputation: 1

Old post but it's the top result on google, so let me share my simple answer.

I just make a function that runs every 200ms, updating the textarea. It's a very easy way to do it, but it works for me.

Ignore the css please! It is just for decoration.

function textarea_height() {
    var textarea = document.getElementById("htmlinput");
  textarea.rows = textarea.value.split("\n").length;
}
setInterval(textarea_height, 200);
#htmlinput {
  border-color: black;
  border-radius: 15px;
  border-width: 3.3px;
  font-family: monospace;
  background-color:lightgray;
  width: calc(98%);
  padding: 5.5px;
}
<html>
<head>
<title> StackOverflowExample </title>
</head>
<body>

  <textarea id="htmlinput">Here is my
  Very Cool
  Text Area
  it even fits
  to the lines of
  the text!</textarea>

</body>
</html>

Upvotes: -4

Baro
Baro

Reputation: 5530

The best solution I founded (on developer.mozilla.org) with Javascript and adapted to be used in one line and with a bit of style.

The separate Javascript is only useful for automatic writing for the demo.

/*
      AUTO TYPE TEXT FROM THIS S.O. ANSWER: 
          https://stackoverflow.com/a/22710273/4031083
          Author @Mr.G
*/
var demo_input = document.getElementById('txtArea');

var type_this = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed blandit turpis, eu auctor arcu.\r\n\r\nCras iaculis urna non vehicula volutpat. Nullam tincidunt, ex sit amet commodo pulvinar, lorem ex feugiat elit, non eleifend nisl metus quis erat.";
var index = 0;

window.next_letter = function() {
    if (index <= type_this.length) {
        demo_input.value = type_this.substr(0, index++);
        demo_input.dispatchEvent(new KeyboardEvent('keyup'));
        setTimeout("next_letter()", 50);
    }
}

next_letter();
<!-- THE MAIN PART -->
<textarea 
  id = "txtArea"
  cols="20" 
  rows="4" 
  onkeyup="if (this.scrollHeight > this.clientHeight) this.style.height = this.scrollHeight + 'px';"
  style="overflow:hidden;
         transition: height 0.2s ease-out;">
         
</textarea>

Upvotes: 3

Alex Ruhl
Alex Ruhl

Reputation: 457

Here is the JavaScript function

// TextArea is the Id from your textarea element
// MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) {
    textarea = document.getElementById(TextArea);
    textareaRows = textarea.value.split("\n");
    if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
    else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
    else counter = 1;
    textarea.rows = counter; }

here is the css style

.textarea {
height: auto;
resize: none; }

and here is the HTML code

<textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

it works fine for me

Upvotes: 6

Sandro Paganotti
Sandro Paganotti

Reputation: 2313

You can use contenteditable and let the user input in a straight div, here's a demo: http://jsfiddle.net/gD5jy/

HTML

<div contenteditable>
    type here...
</div>

CSS

div[contenteditable]{
    border: 1px solid black;
    max-height: 200px;
    overflow: auto;
}

Upvotes: 65

Related Questions