Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><s>It can be achieved using JS. Here is a 'one-line' <a href="http://jsfiddle.net/Tw9Rj/6/" rel="noreferrer">solution</a> using <a href="http://unwrongest.com/projects/elastic/" rel="noreferrer">elastic.js</a>:</p> <pre><code>$('#note').elastic(); </code></pre> <p></s></p> <p>Updated: Seems like elastic.js is not there anymore, but if you are looking for an external library, I can recommend <a href="http://www.jacklmoore.com/autosize/" rel="noreferrer">autosize.js by Jack Moore</a>. This is the working example:</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>autosize(document.getElementById("note"));</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea#note { width:100%; box-sizing:border-box; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:linear-gradient(#F9EFAF, #F7E98D); background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"&gt;&lt;/script&gt; &lt;textarea id="note"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.&lt;/textarea&gt;</code></pre> </div> </div> </p> <p>Check this similar topics too:</p> <p><a href="https://stackoverflow.com/questions/7477/autosizing-textarea-using-prototype">Autosizing textarea using Prototype</a></p> <p><a href="https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length">Textarea to resize based on content length</a></p> <p><a href="https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize">Creating a textarea with auto-resize</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload