title: display all textarea rows without scrolling
body: <p>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.</p>
  
  <pre><code>.form-control{
      width:400px;
      min-height: 100px;
      max-height: 900px;
      height: auto;}
  </code></pre>
  
  <p>I don't really know if is possible to do that with css.     </p>
  
  <p>Maybe is possible with native javascript so I am trying something like this </p>
  
  <pre><code>function expandtext(expand) {
      while (expand.rows &gt; 1 &amp;&amp; expand.scrollHeight &lt; expand.offsetHeight) {
          console.log("display all rows!")&gt;
      }
  }
  </code></pre>
  
  <p>I find something nice <strong><a href="http://perplexed.co.uk/596_expanding_textarea_as_you_type.htm" rel="noreferrer">here</a></strong> but it only increase and decrease rows , so how can I display all textarea rows without using scroll. DON'T NEED SOLUTION WITH FIXED HEIGHT, NEED SOMETHING DYNAMIC or other solutions that works only on chrome browser or only on firefox like Object.observe().</p>
  
  <h2>Demo</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function expandtext(expand) {
    while (expand.rows &gt; 1 &amp;&amp; expand.scrollHeight &lt; expand.offsetHeight) {
      console.log("display all rows!") &gt;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 20px;
  }
  .form-control {
    width: 400px;
    min-height: 100px;
    max-height: 900px;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class=" form-group"&gt;
    &lt;label&gt;remove texarea scroll and display all rows&lt;/label&gt;
    &lt;textarea class="form-control" rows="4" onkeydown="expandtext(this);"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
      primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
      tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class=" form-group"&gt;
    &lt;label&gt;remove texarea scroll and display all rows&lt;/label&gt;
    &lt;textarea class="form-control" rows="4" onkeydown="expandtext(this);"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.&lt;/textarea&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>External <a href="http://jsfiddle.net/ZurAk/292/" rel="noreferrer">JSFiddle</a>.</p>