How to Increase the size of TextArea in html razor view mvc4?

Question

I have one text area field called Description in my view. I wish to increase the size of that field.

My code

  <div class="col-sm-3">
  <div class="form-group">
  <span style="color: #f00">*</span>
   @Html.LabelFor(model => model.Description, new { @class = "control-label" })
   @Html.TextAreaFor(model => model.Description, new { @class = "required", style = " rows=10, columns=40" })
   @Html.ValidationMessageFor(model => model.Description)
       </div>
     </div>

My TextArea

I want to bring as like which is mention in the below image

So i gave Rows and columns in textarea field. It increase the size of the text area. But when i shrink the page to phone size means all fields got shrink . But this textarea field is not shrink up to the page size. This is the issue

I kept validation for my fields. I want to show that validation in Red color. I'm using Model validation.

score 18 · Answer 1 · answered May 03 '16 at 04:24

18

Try This:

  @Html.TextAreaFor(model => model.Description, 10,40, htmlAttributes: new {style="width: 100%; max-width: 100%;" })

answered May 03 '16 at 04:24

error_handler

1,191
11
19

score 14 · Answer 2 · edited Dec 19 '19 at 13:02

14

While this is already answered, Someone out there might still need this.

 @Html.TextAreaFor(model => model.comments, 
 new { @cols = "100", @rows =  "8", @style="width:100%;"})

edited Dec 19 '19 at 13:02

Kanaiya Katarmal

5,974
4
30
56

answered Nov 10 '17 at 23:15

Twaya

161
1
4

That person is me. Appreciate it! – GRU119 May 08 '19 at 14:49

score 0 · Answer 3 · answered May 03 '16 at 04:17

0

Rows and Cols does not come under style tag. Its an independent attribute for textarea. You can write it as below.

@Html.TextAreaFor(model => model.Description, new { @class = "required", @cols = 40, @rows = 10})

answered May 03 '16 at 04:17

Guruprasad J Rao

29,410
14
101
200

score 0 · Answer 4 · answered Dec 22 '16 at 10:12

0

Remove textArea element from site.css file. In site.css textarea max-width set as 280px;
Do like

input
,select
/*,textarea*/ 
{
    max-width: 280px;
}

answered Dec 22 '16 at 10:12

Jitendra Joshi

78
5

score 0 · Answer 5 · answered Mar 08 '23 at 19:32

0

use this MVC razor syntax will take only value @Html.TextAreaFor(model => model.comment, 10, 40, new { htmlAttributes = new { @class = "form-control" } });

answered Mar 08 '23 at 19:32

Wasiq Khan

1
1

score -1 · Answer 6 · edited Oct 18 '17 at 21:43

-1

@Html.TextAreaFor(m => m.Description, 10, 40, new { @class = "form-control required", style="max-width:75% !important;" })

edited Oct 18 '17 at 21:43

JulienD

7,102
9
50
84

answered Oct 18 '17 at 19:03

Felix

31
3

score -1 · Answer 7 · edited Dec 19 '19 at 13:16

-1

  @Html.TextAreaFor(model => model.Description, new { @class = "form-control", @cols = 10, @rows = 10,@style="resize:both;" })

edited Dec 19 '19 at 13:16

ChrisMM

8,448
13
29
48

answered Dec 19 '19 at 12:38

Zufan Tadese

1

Explain your answer. – Aksen P Dec 19 '19 at 13:37

score -1 · Answer 8 · answered Jun 19 '20 at 07:18

-1

@Html.TextAreaFor(model => model.Description,10,40, new { @class = "required"})

answered Jun 19 '20 at 07:18

Shaikh

1

1

Please share some info around why your answer works instead of just pasting code. – Unbranded Manchester Jun 19 '20 at 07:35

How to Increase the size of TextArea in html razor view mvc4?

8 Answers8