• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

319
Views
Why is Textarea empty despite there is content between <textarea></textarea>

I have included a Textarea in a Bootstrap modal like Before<textarea>Foo</textarea>After but it always shows only Before [empty textarea] After. I have no idea why that is the case. I have no JS doing anything to that textarea, so the content between <textarea></textarea> should just show up right?

I have the below code for the Bootstrap modal

 <section class='modal fade' id='photo-caption-modal'>
   <div class='modal-dialog modal-dialog-centered'>
     <div class='modal-content w-75 mx-auto'>
       <div class='modal-header'>
          <h6 class='modal-title'>Modify the photo caption</h6>
           <button type='button' class='btn-close' data-bs-dismiss='modal'></button>
        </div>
        <div class='modal-body'>
         Before<textarea class='form-control' id='photo-caption' rows='3' placeholder="Write a caption"> HELLO WORLD </textarea>After
        </div>
     </div>
   </div>
 </section>

Which I show by

let captionModal = new bootstrap.Modal(document.querySelector('#photo-caption-modal')); 
captionModal.show(); 

I was simply expecting to see hello world between that Before and After in the textarea, but it is empty. "hello world" doesn't change anything.

Below is a screenshot of what I see

  • Browser Screenshot
  • Chrome Inspect Element closeup
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

It works fine for me in the code editor, so there must be some rogue custom CSS or javascript hiding. When inspecting the element in chrome, go to the styles tab & computed tab and look for any custom css that might be hiding it.

If the default text that you put in the innerHTML of isn't visible, it'd be good to know whether you can see the text when the user inputs a value.

Since your code, as pasted, works fine... you know what isn't broken at least. You've got some custom css or js somewhere else that is hiding that value, so keep digging.

let captionModal = new bootstrap.Modal(document.querySelector('#photo-caption-modal')); 
captionModal.show(); 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<section class='modal fade' id='photo-caption-modal'>
   <div class='modal-dialog modal-dialog-centered'>
     <div class='modal-content w-75 mx-auto'>
       <div class='modal-header'>
          <h6 class='modal-title'>Modify the photo caption</h6>
           <button type='button' class='btn-close' data-bs-dismiss='modal'></button>
        </div>
        <div class='modal-body'>
         Before<textarea class='form-control' id='photo-caption' rows='3' placeholder="Write a caption"> HELLO WORLD </textarea>After
        </div>
     </div>
   </div>
 </section>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error