title: Automatically resizing textarea in bootstrap
body: <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>