How to increase height of textarea using bootstrap rows and columns

Question

I have designed a form in which I have two items in a row, like this:

My output

Code that I used:

<div class="row">
    <div class="col-sm-3">  <!-- [1, 0] -->
        <fieldset class="form-group">
            <label id="fieldTitle">Equipment Length</label>
            <select id="selectOption" class="form-control" required data-error="Please select Equipment Length"></select>
            <div class="help-block with-errors"></div>
        </fieldset>
    </div>
    <div class="col-sm-9">  <!-- [1, 1] -->
        <fieldset class="form-group">
            <label id="fieldTitle">Customer Notes</label>
            <textarea class="form-control" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea>
            <div class="help-block with-errors"> {{myTextarea}} </div>
        </fieldset>
    </div>
</div>

So, please guide me how do I increase the height of the textarea just like my

desired output please tell me how do I do it. Thanks

Use **`rows - https://www.w3schools.com/tags/att_textarea_rows.asp`** attribute of `textarea` — Guruprasad J Rao, Feb 01 '18 at 08:06
@E-housmaMardini Yes I tried rows attribute, but it's not working. — Sikandar Sahab, Feb 01 '18 at 08:12
you need to show us full CSS code and try to make a working snippet — Temani Afif, Feb 01 '18 at 08:20
Possible duplicate of [Should I size a textarea with CSS width / height or HTML cols / rows attributes?](https://stackoverflow.com/questions/3896537/should-i-size-a-textarea-with-css-width-height-or-html-cols-rows-attributes) — core114, Nov 01 '18 at 05:30

user3399299 · Answer 1 · 2018-11-01T05:24:34.443

46

With Bootstrap 4 you will need to have the property rows and add "height: 100%;" so that the height would stretch to the number of rows specified. "rows" along does not work.

<textarea rows="10" style="height:100%;"></textarea>

edited Nov 01 '18 at 05:24

answered Nov 01 '18 at 05:19

user3399299

569
1
4
4

Same answer as @Noriel but 8 month later – quant Nov 01 '18 at 05:28
9

Perhaps, though I see that 100px is quite different that 100% in terms of results. Nevertheless, I would leave this for newbies... – user3399299 Nov 01 '18 at 05:38
2

`h-100` on Bootstrap, FYI – hunj Mar 25 '21 at 14:53

score 14 · Accepted Answer · answered Feb 01 '18 at 08:17

14

textarea {
  width: 300px;
  height: 150px;
}

adjust as needed.

answered Feb 01 '18 at 08:17

reiallenramos

1,235
2
21
29

@core114 are you insinuating that I plagiarized? are you sure it's not a complete coincidence that I used that same values? – reiallenramos Nov 02 '18 at 06:40
5

@core114 In cases like this with a small piece of code it's unlikely that it's actual plagiarized. In comparison, when a greater part of code (let's say 15+ lines) is completely identical, it's very likely that it's plagiarism. But always asume good faith first. – Filnor Nov 02 '18 at 06:51

score 14 · Answer 3 · answered Feb 01 '18 at 08:31

14

In HTML set

<textarea rows="10"></textarea>

In CSS set

textarea { height: 100px; }

I hope it helps.

answered Feb 01 '18 at 08:31

Noriel

218
1
7

score 11 · Answer 4 · answered Jun 06 '19 at 15:47

11

With Bootstrap 4 you will need to add h-25 class

<textarea class="form-control h-25" rows="5" placeholder="Please write customer notes"></textarea>

answered Jun 06 '19 at 15:47

Dantis Mathew

119
1
2

6

Maybe you can explain what that class does and why adding it helps – camille Jun 06 '19 at 16:07
1

h-25 means 25% of parent element height – Philip Mar 23 '21 at 11:17

score 10 · Answer 5 · answered Apr 24 '18 at 06:07

10

the class form-control remove textarea rows attribute so just replace it with col-md-12

<textarea class="col-md-12" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea>

answered Apr 24 '18 at 06:07

Hisham

1,279
1
17
23

score 1 · Answer 6 · answered Oct 15 '19 at 15:36

Not a big fan of changing globally the textarea css attr.

Would rather use a specific css class, but it could be overriden by some other classes, so you could use the !important, even tho it is not a best practice.

{{ form_widget(form.myTextarea,{'attr': {'class': 'specific-textarea'}}) }}

And add in your CSS

.specific-textarea { height: 200px !important; }

How to increase height of textarea using bootstrap rows and columns

6 Answers6

Linked