Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>See <a href="http://jsfiddle.net/ImpressiveWebs/fGNNT/1333/" rel="nofollow noreferrer">this Fiddle</a> from <a href="https://stackoverflow.com/a/18872921/1158583">this answer</a>. That increases the height of the textarea based on the number of lines. </p> <p>I think that's what you're asking for. </p> <p>Copied the code from the answer below:</p> <p><strong>HTML</strong></p> <pre><code>&lt;p&gt;Code explanation: &lt;a href="http://www.impressivewebs.com/textarea-auto-resize/"&gt;Textarea Auto Resize&lt;/a&gt;&lt;/p&gt; &lt;textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"&gt;&lt;/textarea&gt; </code></pre> <p><strong>JS</strong></p> <pre><code>/*global document:false, $:false */ var txt = $('#comments'), hiddenDiv = $(document.createElement('div')), content = null; txt.addClass('txtstuff'); hiddenDiv.addClass('hiddendiv common'); $('body').append(hiddenDiv); txt.on('keyup', function () { content = $(this).val(); content = content.replace(/\n/g, '&lt;br&gt;'); hiddenDiv.html(content + '&lt;br class="lbr"&gt;'); $(this).css('height', hiddenDiv.height()); }); </code></pre> <p><strong>CSS</strong></p> <pre><code>body { margin: 20px; } p { margin-bottom: 14px; } textarea { color: #444; padding: 5px; } .txtstuff { resize: none; /* remove this if you want the user to be able to resize it in modern browsers */ overflow: hidden; } .hiddendiv { display: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ } /* the styles for 'commmon' are applied to both the textarea and the hidden clone */ /* these must be the same for both */ .common { width: 500px; min-height: 50px; font-family: Arial, sans-serif; font-size: 13px; overflow: hidden; } .lbr { line-height: 3px; } </code></pre>
 

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