If I want my textarea to be hidden, how do I do it?

Question

If I want my textarea to be hidden, how do I do it?

Answer 1

Everyone is giving you answers, but not much on the reasons. Here you go: if you use the CSS rule visibility:hidden; the text area will be invisible, but it will still take up space. If you use the CSS rule display:none; the textarea will be hidden and it won't reserve space on the screen—no gaps, in other words, where it would have been. Visual example below.

So you want something like this to be totally hidden:

</code></pre>

<hr>

<h2>Example</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* no styling should show up for either method */
textarea {
  background: lightblue;
  border: 1px solid blue;
  font-weight: bold;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.
Some text after.



Textarea with display:none;
Text within.
Some text after. Neither height nor margin/padding/layout kept. No other styles visible.



Textarea with visibility:hidden;
Text within.
Some text after. Height and margin/padding/layout kept. No other styles visible.