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>

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>