Creating a textarea with auto-resize
This works for me (Firefox 3.6/4.0 and Chrome 10/11):
var observe;if (window.attachEvent) { observe = function (element, event, handler) { element.attachEvent('on'+event, handler); };}else { observe = function (element, event, handler) { element.addEventListener(event, handler, false); };}function init () { var text = document.getElementById('text'); function resize () { text.style.height = 'auto'; text.style.height = text.scrollHeight+'px'; } /* 0-timeout to get the already changed text */ function delayedResize () { window.setTimeout(resize, 0); } observe(text, 'change', resize); observe(text, 'cut', delayedResize); observe(text, 'paste', delayedResize); observe(text, 'drop', delayedResize); observe(text, 'keydown', delayedResize);
text.focus(); text.select(); resize();}
textarea { border: 0 none white; overflow: hidden; padding: 0; outline: none; background-color: #D0D0D0;}
<body onload="init();"><textarea rows="1" style="height:1em;" id="text"></textarea></body>
CSS rule to auto-resize textarea upon text
This cannot be done using pure CSS at least for <textarea>
, the reason being, interaction can be captured only by JavaScript. But you can make something like <div>
having a contenteditable
, a fake <textarea>
can be made possible.
Snippet
div { display:inline-block; border: solid 1px #999; min-height: 100px; width: 300px;}
<div contentEditable></div>
How to auto resize the textarea to fit the content?
addEventListener
here is redundant since valueChanges
already notifies you when the field changes. Instead, update the height using the ViewChild
reference myDiv
.
this.myForm.valueChanges.subscribe(value => {
this.myDiv.nativeElement.style.height = 'auto';
this.myDiv.nativeElement.style.height = `${this.myDiv.nativeElement.scrollHeight}px`;
});
Then add overflow: hidden
to your css so the scrollbar doesn't show.
textarea {
resize: horizontal;
overflow: hidden;
}
You can keep the resize: horizontal;
but it is no longer required since the textarea will resize automatically anyway.
Here is a working example on StackBlitz.
Is there anyway to have a textarea "autofit" height based on the content at page load?
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/
Set Initial Height for Resizable Text Area with Large Initial Value
I guess, this code will work. Please share your code as a snippet, it would be easy to debug.
textarea{ resize:vertical; min-height:168px;}
<textarea></textarea>
Textarea Auto height
It can be achieved using JS. Here is a 'one-line' solution using elastic.js:
$('#note').elastic();
Updated: Seems like elastic.js is not there anymore, but if you are looking for an external library, I can recommend autosize.js by Jack Moore. This is the working example:
autosize(document.getElementById("note"));
textarea#note { width:100%; box-sizing:border-box; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:linear-gradient(#F9EFAF, #F7E98D); background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D);}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script><textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>
Textarea auto-height-increase
You really need js to do this, see example below:
var textarea = document.getElementById("textarea");var limit = 80; //height limit
textarea.oninput = function() { textarea.style.height = ""; textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";};
textarea { width: 100%;}
<textarea id="textarea"></textarea>
HTML/CSS Textarea height auto? Text is falling behind
Sorry but it's not possible with plain css to change the height of a textarea depending on its content. You will have to use javascript or give it a solid height and maybe a scrollbar, when to many lines are added.. :(
Related Topics
How to Pass Data from Flask to JavaScript in a Template
How to Make My Discord Bot Send a Message When a Specific User Plays a Specific Game
How to Find If a Text Contains Url String
Formdata Created from an Existing Form Seems Empty When I Log It
How to Change Image and Text Color When Clicking Using React-Native
Button Enabled and Disabled Based on Checkbox Is Checked or Not
How to Get the Id of a Button That Was Clicked - Reactjs
Making a JavaScript Function That Finds the First Word in a String/Sentence
How to Press Enter Key Automatically Using Jquery
Assigning Id to All Elements of a Page in Angular Automatically
Make the Bootstrap Table Scroll-Able Vertically and Horizontally With Fixed Header
Regex to Match 2 Different Words in a String
How to Block +,-,E in Input Type Number
Datatables - Search in Multiple Columns With a Single Drop Down
Jquery Datatables: Hide Search Bar
How to Close Bootstrap 3 Dropdown When We Click Outside on a Tablet