CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
Akila
Akila

Reputation: 765

Place holder for `Textarea` not working in `Bootstrap`

     <div class="form-group">
       <label for="user-message" class="col-lg-2 control-label">Message
       </label>
       <div class="col-lg-10">
           <textarea name="user-message" id="user-message" class="form-control" cols="20" rows="10" placeholder="Enter your Message">
           </textarea> 
       </div><!--end col 10-->
     </div><!--ends from group-->

I am new to Bootstrap. I was trying to use placeholder in textarea.I was not able to see the Placeholervalues in my textarea.Please help me in this.

Upvotes: 10

Views: 14604

Answers (3)

Babasaheb Dhodad
Babasaheb Dhodad

Reputation: 90

Use this code

<div class="form-group">
       <label for="user-message" class="col-lg-2 control-label">Message
       </label>
       <div class="col-lg-10">    
<textarea name="user-message" id="user-message" cols="20"  rows="10" class="form-control" placeholder="Enter your Message"></textarea>
 </div><!--end col 10-->
     </div><!--ends from group-->

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281854

The opening and closing tags for the <textarea> element must be on the same line, otherwise a newline character occupies it. The placeholder will therefore not be displayed since the input area contains content which is a newline.

 <div class="form-group">
   <label for="user-message" class="col-lg-2 control-label">Message
   </label>
   <div class="col-lg-10">
       <textarea name="user-message" id="user-message" class="form-control" cols="20" rows="10" placeholder="Enter your Message"></textarea> 
   </div><!--end col 10-->
 </div><!--ends from group-->

JSFIDDLE

Upvotes: 5

Michael Banzon
Michael Banzon

Reputation: 4967

Placeholder text is only shown when there is no content in the input component.

The <textarea> element you have is not empty - there is whitespace between the start and ending tags.

The fix is to remove this whitespace:

 <div class="form-group">
   <label for="user-message" class="col-lg-2 control-label">Message
   </label>
   <div class="col-lg-10">
       <textarea name="user-message" id="user-message" class="form-control" cols="20" rows="10" placeholder="Enter your Message"></textarea>
   </div><!--end col 10-->
 </div><!--ends from group-->

Upvotes: 21

Related Questions