Display All Textarea Rows Without Scrolling

How can I display all textarea rows instead of having that vertical scroll. I have tried with css using min-height and max-height and height: auto but is not working. .form-control

Solution 1:

Simple jQuery solution is:

$(function() {
    $('textarea').each(function() {
        $(this).height($(this).prop('scrollHeight'));
    });
});

Check Fiddle.

As you need a plain JavaScript solution, use following script that was created by User panzi. You can view the original answer here.

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('textarea');
    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();
}

Check Fiddle Here.

Solution 2:

No Javascript required.

You can display a no-scroll (ie. automatically re-sizing) editable text area with the following HTML and CSS:

.textarea {
  width:250px;
  min-height:50px;
  height:auto;
  border:2px solid rgba(63,63,63,1);
}

<divclass="textarea"contenteditable="true">

Solution 3:

The Mozilla Developer Network has an Autogrowing textarea example on their HTMLTextAreaElement page. You should definitely check this out if you want to stay away from CSS3 solutions that can break on older browsers.

Here is the code from the example.

The following example shows how to make a textarea really autogrow while typing.

functionautoGrow(oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
}

textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

<formname="myForm"><fieldset><legend>Your comments</legend><p><textareaclass="noscrollbars"onkeyup="autoGrow(this);"></textarea></p><p><inputtype="submit"value="Send" /></p></fieldset></form>

Autoadjust

This example will take care of the case where you remove lines.

functionautoAdjustTextArea(o) {
  o.style.height = '1px'; // Prevent height from growing when deleting lines.
  o.style.height = o.scrollHeight + 'px';
}


// =============================== IGNORE =====================================// You can ignore this, this is for generating the random characters above.var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================// Get a reference to the text area.var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.autoAdjustTextArea(txtAra);

textarea.noscrollbars {
  overflow: hidden;
  width: 400px; /** This is via your example. */
}

<formname="myForm"><fieldset><legend>Your comments</legend><p><textareaclass="noscrollbars"onkeyup="autoAdjustTextArea(this);"></textarea></p><p><inputtype="submit"value="Send" /></p></fieldset></form>

Solution 4:

Using Jquery and some logic I have tried to do what you need. Here is the jsfiddle; https://jsfiddle.net/45zsdzds/

HTML:

<textarea class="myClass"id="FurnishingDetails" name="FurnishingDetails"id="FurnishingDetails"></textarea>

Javascript:

$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function() { return $('#FurnishingDetails').text().split(/\r*\n/); }
String.prototype.lineCount = function() { return $('#FurnishingDetails').text().lines().length; }
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');

CSS:

textarea[name='FurnishingDetails']{
 height:2em;  
}

Used How to get the number of lines in a textarea? to add a String prototype inorder to get the linecount.