Placeholder not visible in Textarea

Question

I am having a slight issue with my textarea in html, when I add the Placeholder attribute it doesn't seem to be visible until I highlight and press backspace also the cursor appears further away from the initial leftmost position.

<html>

<head>
  <title>
    Post a Task
  </title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">



</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
    <div class="card-body">
      <h5 class="card-title text-center"  id="Signup_Title">POST YOUR TASK </h5>
      <!--<h6 class="card-title text-center"  id="Signup_Sub_Title"></h6>-->
      <form>

        <div id="formpage_1">
          
            <div class="form-row">
                <div class="form-group col-md-12">
                    <label>Brief Title:</label>
                  <textarea class="form-control" cols="50" rows="2"  placeholder="Brief Title">
                    
                  </textarea>
                  
                </div>
              </div>

          <div class="form-row">
            <div class="form-group col-md-12">
              <label>Detailed Description:</label>
              <textarea class="form-control" cols="50" rows="8"  placeholder="Detailed Description">
                
              </textarea>
              
            </div>
          </div>

          <div class="form-group">
              <button type="menu" class="btn btn-primary form-control"
                style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
                </button>
            </div>

     
        </div>
</body>

</html>

Have you tried removing the line break inside the `` element? Works fine in Firefox. — Sebastian Simon, Nov 25 '19 at 13:55
I think its important i mention that i am using bootstrap and am attaching a form-control class to the textarea — Wales77, Nov 25 '19 at 13:56
@Wales77 Please provide a [mcve]. We can't help you if we can't reproduce the problem. — Ivar, Nov 25 '19 at 13:57
I just editied my post the actual code is what i have there now@Ramesh — Wales77, Nov 25 '19 at 14:07
@Wales77 as Sebastian mentioned, remove the white-space between the `` and ``. They should be on the same line with nothing between them. Otherwise anything that is between those open and close tags is considered its value and because it is not empty, it wont show the placeholder. — Ivar, Nov 25 '19 at 14:12
Possible duplicate of [Why is textarea filled with mysterious white spaces?](https://stackoverflow.com/questions/2202999/why-is-textarea-filled-with-mysterious-white-spaces) — Ivar, Nov 25 '19 at 14:13
Possible duplicate of [Why is textarea filled with mysterious white spaces?](https://stackoverflow.com/questions/2202999/why-is-textarea-filled-with-mysterious-white-spaces) — Sebastian Simon, Nov 25 '19 at 17:53

score 0 · Accepted Answer · answered Nov 25 '19 at 15:07

<html>

<head>
  <title>
    Post a Task
  </title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">



</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
    <div class="card-body">
      <h5 class="card-title text-center"  id="Signup_Title">POST YOUR TASK </h5>
      <!--<h6 class="card-title text-center"  id="Signup_Sub_Title"></h6>-->
      <form>

        <div id="formpage_1">
          
            <div class="form-row">
                <div class="form-group col-md-12">
                    <label>Brief Title:</label>
                  <textarea class="form-control" cols="50" rows="2"  placeholder="Brief Title"></textarea>
                  
                </div>
              </div>

          <div class="form-row">
            <div class="form-group col-md-12">
              <label>Detailed Description:</label>
              <textarea class="form-control" cols="50" rows="8"  placeholder="Detailed Description"></textarea>
              
            </div>
          </div>

          <div class="form-group">
              <button type="menu" class="btn btn-primary form-control"
                style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
                </button>
            </div>

REMOVED WHITE SPACE

Placeholder not visible in Textarea

1 Answers1