title: To auto resize textarea when the value is changed using javascript
body: <p>Here is my code:</p>
  
  <pre><code>     &lt;html&gt;
              &lt;head&gt;
              &lt;style&gt;
              textarea{ 
                width: 30%; 
                min-width:30%; 
                max-width:30%; 
                overflow: hidden;
                height:10%; 
                min-height:10%;  
                max-height:10%;
                resize: none;
                white-space:pre;
              }
              &lt;/style&gt;
              &lt;script&gt;
              function textAreaAdjust(o) {
                  o.style.height = "1px";
                  o.style.height = (25+o.scrollHeight)+"px";
              }
              function click1()
              {
  
                  document.getElementById('text').value="Stack Overflow is a 
  privately held website, the flagship site of the Stack Exchange Network,
  [5][6] created in 2008 by Jeff Atwood and Joel Spolsky,[7][8] as a more open
   alternative to earlier Q&amp;A sites such as Experts Exchange. The name for the
   website was chosen by voting in April 2008 by readers of Coding Horror, 
  Atwood's popular programming blog.[9]";
                  $("#text").focus();
              }
              &lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
  
              &lt;textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden" id="text"&gt;&lt;/textarea&gt;
              &lt;input type="button" onClick="click1()"&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>In this code when i click that button it should display the content what i have given in the javascript inside a textarea. But the textarea i have given here is overflow:hidden, so it shows only some content and the rest hides inside. How can i make all the content visible.</p>
  
  <p>Need all your suggestion.</p>