How to set a Textarea to 100% height in Bootstrap 3?

Question

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?

@Zhihao Because it doesnt work that way, using boostrap and all the predefined default settings. — davidkonrad, Jan 21 '14 at 15:17

score 16 · Accepted Answer · edited Nov 15 '16 at 09:36

16

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

See demo on Fiddle

edited Nov 15 '16 at 09:36

Stacked

6,892
7
57
73

answered Jan 21 '14 at 15:12

davidkonrad

83,997
17
205
265

score 8 · Answer 2 · answered Oct 15 '14 at 16:25

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.

score 3 · Answer 3 · answered Jan 21 '14 at 15:10

3

textarea { 
   min-height: 100%;
}

answered Jan 21 '14 at 15:10

CRABOLO

8,605
39
41
68

Have you tried? It doesnt work. This is a **bootstrap** issue. – davidkonrad Jan 21 '14 at 15:16

score 3 · Answer 4 · answered Apr 26 '15 at 08:45

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%;
}

answered Apr 26 '15 at 08:45

OlivMertens

134
5

`` This is working. – Mehmet Sefa Balık May 28 '17 at 15:45

score 2 · Answer 5 · edited Dec 13 '16 at 19:34

2

You can use CSS:

textarea {
    height: 100%;
}

Relative to the top layer.

edited Dec 13 '16 at 19:34

Deepak Mahakale

22,834
10
68
88

answered Jan 21 '14 at 15:11

skozz

2,662
3
26
37

Have you tried? It doesnt work. This is a **bootstrap** issue. – davidkonrad Jan 21 '14 at 15:16
Yes, but without `block`. My fault. See the jsfiddle, I told you, you need to consider the main container before, like `davidkonrad` – skozz Jan 21 '14 at 15:21

score 0 · Answer 6 · answered Oct 31 '14 at 01:51

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;
}

answered Oct 31 '14 at 01:51

theawesomecoder61

11
2

score 0 · Answer 7 · edited Jul 21 '17 at 07:09

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>

edited Jul 21 '17 at 07:09

Rob

26,989
16
82
98

answered Jul 21 '17 at 07:02

John Warren Mondido Tañiza

81
1
14

The Gem Dev · Answer 8 · 2020-12-03T21:57:58.583

.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;
}

edit and add a working code snippet so users can test the code — Chamsddine Bouzaine, Oct 20 '20 at 20:13

How to set a Textarea to 100% height in Bootstrap 3?

8 Answers8

Linked