I want to make height of textarea equal to height of the text within it (And remove the scroll bar)
HTML
<textarea id="note">SOME TEXT</textarea>
CSS
textarea#note {
width:100%;
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);
}
JsFiddle: http://jsfiddle.net/Tw9Rj/
This question is related to
javascript
html
css
I used jQuery AutoSize. When I tried using Elastic it frequently gave me bogus heights (really tall textarea's). jQuery AutoSize has worked well and hasn't had this issue.
var minRows = 5;
var maxRows = 26;
function ResizeTextarea(id) {
var t = document.getElementById(id);
if (t.scrollTop == 0) t.scrollTop=1;
while (t.scrollTop == 0) {
if (t.rows > minRows)
t.rows--; else
break;
t.scrollTop = 1;
if (t.rows < maxRows)
t.style.overflowY = "hidden";
if (t.scrollTop > 0) {
t.rows++;
break;
}
}
while(t.scrollTop > 0) {
if (t.rows < maxRows) {
t.rows++;
if (t.scrollTop == 0) t.scrollTop=1;
} else {
t.style.overflowY = "auto";
break;
}
}
}
textarea#note {
width:100%;
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:-o-linear-gradient(#F9EFAF, #F7E98D);
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
background:linear-gradient(#F9EFAF, #F7E98D);
height:100%;
}
html{
height:100%;
}
body{
height:100%;
}
or javascript
var s_height = document.getElementById('note').scrollHeight;
document.getElementById('note').setAttribute('style','height:'+s_height+'px');
For those of us accomplishing this with Angular JS, I used a directive
HTML:
<textarea elastic ng-model="someProperty"></textarea>
JS:
.directive('elastic', [
'$timeout',
function($timeout) {
return {
restrict: 'A',
link: function($scope, element) {
$scope.initialHeight = $scope.initialHeight || element[0].style.height;
var resize = function() {
element[0].style.height = $scope.initialHeight;
element[0].style.height = "" + element[0].scrollHeight + "px";
};
element.on("input change", resize);
$timeout(resize, 0);
}
};
}
]);
$timeout
queues an event that will fire after the DOM loads, which is what's necessary to get the right scrollHeight (otherwise you'll get undefined
)
I see that this is answered already, but I believe I have a simple jQuery solution ( jQuery is not even really needed; I just enjoy using it ):
I suggest counting the line breaks in the textarea
text and setting the rows
attribute of the textarea
accordingly.
var text = jQuery('#your_textarea').val(),
// look for any "\n" occurences
matches = text.match(/\n/g),
breaks = matches ? matches.length : 2;
jQuery('#your_textarea').attr('rows',breaks + 2);
This using Pure JavaScript Code.
function auto_grow(element) {_x000D_
element.style.height = "5px";_x000D_
element.style.height = (element.scrollHeight)+"px";_x000D_
}
_x000D_
textarea {_x000D_
resize: none;_x000D_
overflow: hidden;_x000D_
min-height: 50px;_x000D_
max-height: 100px;_x000D_
}
_x000D_
<textarea oninput="auto_grow(this)"></textarea>
_x000D_
html
<textarea id="wmd-input" name="md-content"></textarea>
js
var textarea = $('#wmd-input'),
top = textarea.scrollTop(),
height = textarea.height();
if(top > 0){
textarea.css("height",top + height)
}
css
#wmd-input{
width: 100%;
overflow: hidden;
padding: 10px;
}
Source: Stackoverflow.com