20

I would like to set a textarea to be 100% height. I'm using Bootstrap 3 but couldn't find an option there. 

<div class="container"> <textarea class="form-control" rows="8"></textarea> </div>

How to do it?

Improve this question
2
  • Why not just use height: 100%? Commented Jan 21, 2014 at 15:09
  • 3
    @Zhihao Because it doesnt work that way, using boostrap and all the predefined default settings. Commented Jan 21, 2014 at 15:17

8 Answers 8

Reset to default
16 
html, body, .container { height: 100%; } textarea.form-control { height: 100%; }

See demo on Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

8

I believe this is a bootstrap issue. I ran into a similar problem where the textarea was not allowing for more than 1 row. I found (through trial and error) that placing the textarea in a div and then ignoring the form-group-(x) call within the first div, I was able to control the rows and the cols within the textarea.

<div class="form-group"> <label class="col-sm-3 control-label">Description</label> <div class="col-sm-9"> <textarea class="form-control" rows="10"></textarea> </div> </div>

Changing your code to use the form-group functionality will correct the issue:

<div class="form-group"> <textarea class="form-control" rows="8"></textarea> </div>

That should do the trick for you.

Improve this answer

Comments

3 
textarea { min-height: 100%; }
Improve this answer

1 Comment

Have you tried? It doesnt work. This is a bootstrap issue.
3

Doesn't work for me for bootstrap 3- davidkonrad You can try to modify the number of rows

<textarea class="form-control" cols="60" rows="16"></textarea>

or give a height fixed for the parent container

.form-group{ height:250px; } textarea{ height:100%; }
Improve this answer

1 Comment

<textarea class="form-control" cols="60" rows="16"></textarea> This is working.
2

You can use CSS: 

textarea { height: 100%; }

Relative to the top layer.

Improve this answer

2 Comments

Have you tried? It doesnt work. This is a bootstrap issue.
Yes, but without block. My fault. See the jsfiddle, I told you, you need to consider the main container before, like davidkonrad
0

This worked for me. I am using Bootstrap 3 as well. My textarea is inside a container.

textarea { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
Improve this answer

Comments

0

This solves my problem.. I set the height to auto !important.

<label for="item_description" style="padding-top: 10px;">Item Description</label> <textarea class="form-control" name="item_description" rows="3" style="height:auto !important;"></textarea>
Improve this answer

Comments

0 

.textarea { position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; }
<!DOCTYPE HTML> <html> <head> <title>Text Area</title> </head> <body> <textarea class="textarea"></textarea> <h3>subscribe to my youtube channel<a href="https://www.youtube.com/channel/UCsZ4Ue8c94YLJDbGRafCI5Q">The Gem Dev</a></h3> </body> </html>

This worked for me, i placed it in a container

.textarea { position: absolute; height: 100%; width: 100%; } .textarea .text { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
Improve this answer

1 Comment

edit and add a working code snippet so users can test the code

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.