Reputation: 201

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

Upvotes: 19

Answers (6)

Reputation:

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:

<textarea cols="20" rows="20" style="display:none;">

Example

/* no styling should show up for either method */
textarea {
  background: lightblue;
  border: 1px solid blue;
  font-weight: bold;
}

<p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.</textarea>
<p>Some text after.</p>

<hr />

<p><strong>Textarea with <code>display:none;</code></strong></p>
<textarea style="display:none;">Text within.</textarea>
<p>Some text after. Neither height nor margin/padding/layout kept. No other styles visible.</p>

<hr />

<p><strong>Textarea with <code>visibility:hidden;</code></strong></p>
<textarea style="visibility:hidden;">Text within.</textarea>
<p>Some text after. Height and margin/padding/layout kept. No other styles visible.</p>

Upvotes: 36

Venkat

Reputation: 2579

<!DOCTYPE html>
<html>
<head>
<style>
textarea.none {
    display: none;
}

textarea.hidden {
     visibility: hidden
}

</style>
</head>
<body>

<textarea class="none">The display is none.</textarea>
<br>
<textarea class="hidden">visiblity is hidden</textarea>
<br>
<textarea >This is visible and you can see a space taken visiblity:hidden</textarea>
</body>
</html>

Upvotes: 2

RivEr

Reputation: 69

Hidden with occupy the space on current webpage.

<textarea style="visibility:hidden"></textarea>

Disappear on current webpage with no other effect.

<textarea style="display:none" ></textarea>

Upvotes: 4

Alex KeySmith

Reputation: 17101

You have a few options, here are some examples:

Display:none
Visibility:hidden

Here is some example code for you to see for yourself

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Text Area Hidden</title>
    <style type="text/css">
        .hideButTakeUpSpace
        {
            visibility: hidden;
        }

        .hideDontTakeUpSpace
        {
            display:none;
        }

    </style>

</head>
<body>
    <h1>Text area hidden examples</h1>
    <h2>Hide but take up space (notice the gap below)</h2>
    <textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>

    <h2>Hide Don't take up space</h2>
    <textarea class="hideDontTakeUpSpace" rows="2" cols="20"></textarea>


</body>
</html>

See this jsFiddle Example

Upvotes: 6