Automatically resizing textarea in bootstrap

Question

I found the following very simple way to automatically adjust a textarea to the text height in this jsfiddle http://jsfiddle.net/tovic/gLhCk/:

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

However, I'm using bootstrap in my project and this introduces problems.

1. The textarea is only 4px high instead of 16. It seems like bootstrap changes the way margins and paddings and heights work?
2. When hitting enter, the text is jumping up and down, which is irritating to the eye.

I tried to delete all bootstrap classes in the HTML inspector of my browser but the problem was still there. Does anyone have an idea how to resolve this?

Here's the code when bootstrap's CSS is added:

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Unbridle

I've been looking for how to autoexpand textarea too. I'm doing a python tutorial and using pycharm. Where do I put in all this stuff? >.> my code so far is: <div class="form-group"> <label for="content">Content</label> <textarea id="content" class="form-control" name="content" spellcheck="false" placeholder="Write stuff here ..."></textarea> </div> <button type="submit" class="btn btn-success">Publish</button> – Perpetrate

https://mcmap.net/q/73622/-creating-a-textarea-with-auto-resize – Rothrock

Answer 1

Thanks for all your answers, it gave me valuable insights into what I had to change. In the end, a bit more padding-bottom in the css did the trick.

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  /* margin:0px 0px; this is redundant anyways since its specified below*/
  padding-top:10px;
  padding-bottom:25px; /* increased! */
  /* height:16px; */
  /* line-height:16px; */
  width:100%; /* changed from 96 to 100% */
  display:block;
  /* margin:0px auto; not needed since i have width 100% now */
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Unbridle

Answer 2

replace height with min-height

textarea {
  margin:0px 0px;
  padding:5px;
  min-height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

Gwendolyn

okay this seems to be working for problem one. Do you also have an answer for problem two? ;) – Unbridle

Answer 3

If you want the input box to automatically adapt to the text height. You can try not to use input / textarea but to use div like that:

<div contenteditable="true" aria-multiline="true"></div>

Superannuated

Thanks for this, it also is really nice if one wants editable table cells :) – Unlock

Answer 4

I have the same problem, bootstrap textarea with autosize until I found the solution here, textarea-autosize lib by javierjulio, It works for me, you can try it.

textarea.textarea-autosize {
  height: 2.25rem;
  min-height: 2.25rem;
  resize: none;
  overflow-y:hidden;
}

textarea.textarea-autosize.form-control-lg {
  height: 3.75rem;
  min-height: 3.75rem;
}

textarea.textarea-autosize.form-control-sm {
  height: 2rem;
  min-height: 2rem;
}

For sample of this library you can visit this page jsfiddle. Thanks

Allain

Answer 5

getbootstrap.com said:

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

hidden seemed to do the job just fine ie.. remove the overflow. As always, you must be inside

Fiducial

Answer 6

You can use !important to overwrite bootstrap property.

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px !important;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

Creech

did you try this? doesn't seem to have the desired effect to me? – Unbridle

one more thing you can do, remove textarea property from css and add class form-control into textarea. <textarea class="form-control" id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea> – Creech

still jumping and still the wrong height. also !important fixes it to 16, but I want it to resize. – Unbridle

Answer 7

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Alamo

killing a fly with a sniper rifle... more damage than profit.. might result in unintended effects – Othelia

Answer 8

it is more simpliest, just add a propertie like rows="10", you can show as meny as you want.

Neddie