Automatically resizing textarea in bootstrap
<p>I found the following very simple way to automatically adjust a textarea to the text height in this jsfiddle <a href="http://jsfiddle.net/tovic/gLhCk/" rel="noreferrer">http://jsfiddle.net/tovic/gLhCk/</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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');</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="txtarea" spellcheck="false" placeholder="Statusku..."&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>

<p>However, I'm using bootstrap in my project and this introduces problems.</p>

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

<p>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?</p>

<p>Here's the code when bootstrap's CSS is added:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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');</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;



&lt;textarea id="txtarea" spellcheck="false" placeholder="Statusku..."&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>