How to set a Textarea to 100% height in Bootstrap 3?
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.
html, body, .container {
height: 100%;
}
textarea.form-control {
height: 100%;
}
See demo on Fiddle
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%;
}
textarea {
min-height: 100%;
}