-1

I found a post regarding this topic (How to set a Textarea to 100% height in Bootstrap 3?)

It works great and all until I need to start modifying it. The entire page will exceed 100%. See below for the code that I was using.

<div class="container">
  <div class="row">
      <div class="col-md-12">
          <div class="page-header">
            <h3>Short Essay</h3>
          </div>
          <p>
            Submit a short essay no longer than 1000 words about "How I could realize my career aspiration @Company Abc?"
          </p>
          <hr>
          <form>
              <div class="form-group">
                <textarea class="form-control" rows="8"></textarea>
              </div>
          </form>
      </div>
  </div>
</div>

http://jsfiddle.net/p9G8K/1/

Notice the form actually exceeds the window frame? I have attached a image to better illustrate enter image description here

Seems like the text area is the 100% of the entire page plus the header <div> and my <p>.

-- Edit -- a screen shot of the desire outcome

What I wish to do accomplish is the following enter image description here

Please advice.

Thanks!

Community
  • 1
  • 1
juworld
  • 140
  • 1
  • 15
  • What's wrong in the fiddle? The form is not taking up any of the header or p space from what I can tell. – Dan Jun 14 '14 at 12:30
  • Hi Dan, thanks for the quick reply. I updated my question with a screen shot. Notice in the screen shot, the textarea's 100% actually makes the entire page taller than the height of the window frame? (Hence, you see the scroll bar). – juworld Jun 14 '14 at 14:09
  • So you want it to be 100% of the viewport? That means that it would need to change size as the user adjusts their browser size. Or you would need to detect the user browser size and change the textarea accordingly since every user has a different browser size. Are you sure that's what you want to do? – Dan Jun 14 '14 at 15:07
  • Sorry for the confusion. Maybe I'm not phrasing my question correctly, let me update the question with a screen shot of the desire output. – juworld Jun 16 '14 at 02:26
  • the screenshot really doesn't help, I don't think you understand this issue properly. Do you realize that everyone has a different browser size window? Your "desired outcome" is going to look different depending on each user's screen and browser size (unless you detect that and adjust your display accordingly, but that seems like a lot of work for an unnecessary feature). – Dan Jun 16 '14 at 14:27

1 Answers1

0

It depends on what sort of a look you are looking for. I think what you may be after would require the width/height being specified for <div class='form-group'> element.
Having specified this, you should be able to set the <textarea>'s width/height to 100% hence filling the space required.

gilbert-v
  • 1,263
  • 1
  • 11
  • 23