textarea crosses the div section

Question

How can I stop this from happening?

This is the code for my contact us form. I'm using bootstrap. When I expand the text area it crosses the division. Any alternative I could try inside the textarea by adding inline CSS?

<div id="content">
  <div class="container">
    <div class="col-md-12">
      <ul class="breadcrumb">
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Contact Us</a></li>

      </ul>
      <!--breadcrumb ends--->
    </div>
    <!---col-md-12 ends-->
    <div class="col-md-3">
      <?php include("sidebar.php"); ?>
    </div>
    <!--col-md-3 ends--->


    <div class="col-md-9">
      <div class="box">
        <div class="box-header">
          <center>
            <h2>Contact Us</h2>
            <p class="text-muted">
              Getting you the products and solutions you need to get the job done is ours rep’s first priority. Whether you have specific product questions or need more information on volume pricing, our rep has everything you need to keep your job running on time,
              on budget and on target. <br> If you have any questions,please feel free to contact us,our customer service center is working for you 24/7.
            </p>
          </center>
        </div>
        <!--box-header ends-->
        <form action="contact.php" method="post">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" name="name" required>
          </div>
          <!--form group--->

          <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" name="email" required>
          </div>
          <!--form group--->


          <div class="form-group">
            <label>Subject</label>
            <input type="text" class="form-control" name="subject" required>
          </div>
          <!--form group--->


          <div class="form-group">
            <label>Message</label>
            <textarea class="form-control" name="message"></textarea>
          </div>
          <!--form group--->

          <div class="text-center">
            <button type="submit" class="btn btn-primary" name="submit">
    <i class="fa fa-user-md"></i>Send Message</button>
          </div>
          <!--text-center-->

        </form>
        <!--form ends-->
      </div>
      <!--box ends-->
    </div>
    <!--col-m-9 ends-->

By default it doesn't exceed the `col-md-9` you've put it in. Your CSS is what is making it look like this. — Marc Hjorth, Apr 29 '18 at 17:44
how do i fix it?? it exceeds in mine when i manually pull it but by default its fine — hanuman hanu, Apr 29 '18 at 17:45
Possible duplicate of https://stackoverflow.com/questions/3899463/how-can-i-prevent-the-textarea-from-stretching-beyond-his-parent-div-element-g ? — Red Mercury, Apr 29 '18 at 17:46
Probably [This](https://stackoverflow.com/questions/3899463/how-can-i-prevent-the-textarea-from-stretching-beyond-his-parent-div-element-g) might help — Aman jaura, Apr 29 '18 at 17:47
@hanumanhanu added the comment as a answer. Please accept and up vote, so it can help others. — Aman jaura, Apr 29 '18 at 17:54
@Amanjaura can you help me with this ?? https://stackoverflow.com/questions/50092384/php-error-and-even-after-defining-variable — hanuman hanu, Apr 29 '18 at 23:53
@hanumanhanu added the comment as a answer. Please accept and up vote, so it can help others. — Aman jaura, Apr 30 '18 at 06:27

score 1 · Answer 1 · answered Apr 29 '18 at 17:52

Follow this link "Try this it will help How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)" or try below code

you can limit size:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

To limit size to parents width and/or height:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

textarea crosses the div section

1 Answers1

Linked