How can I change the size of a multi-line editor-field?

Question

I'm working on an MVC project using C#. Right now, I'm trying to customize my views a little, and I'd like to make the text boxes bigger.

I followed the suggestions in this question to move from a single-line to a multi-line text field: Changing the size of Html.TextBox

Now I'm trying to resize that multi-line field, but I'm not sure where or how to do so.

Here are snippets from my Edit view

<div class="editor-label">
     @Html.LabelFor(model => model.Body)
</div>
<div class="editor-field">
     @Html.EditorFor(model => model.Body)
     @Html.ValidationMessageFor(model => model.Body)
</div>

and from my model:

[DataType(DataType.MultilineText)]  
[DisplayName("Body:")]  
public string Body { get; set; }

score 19 · Accepted Answer · answered Feb 25 '11 at 15:44

19

I would do this with CSS:

<div class="editor-multiline-field">
     @Html.EditorFor(model => model.Body)
     @Html.ValidationMessageFor(model => model.Body)
</div>

and then in your CSS file define the width and height to the desired values:

.editor-multiline-field textarea {
    width: 300px;
    height: 200px;
}

answered Feb 25 '11 at 15:44

Darin Dimitrov

1,023,142
271
3,287
2,928

It didn't work for me. I used the exact example above and nothing changed the html.editorfor field's width. – dailyUnknown May 30 '16 at 19:08
I had to remove "textarea" from my custom .editor-multiline-field to have it resize correctly – Moi Hawk Apr 15 '19 at 23:44

score 16 · Answer 2 · answered Apr 13 '12 at 09:51

16

You can also use @Html.TextArea ou TextAreaFor

@Html.TextAreaFor(model => model.Text, new { cols = 25, @rows = 5 })

answered Apr 13 '12 at 09:51

Pedro Fillastre

892
6
10

score 8 · Answer 3 · answered Jul 31 '15 at 11:45

8

In MVC 5 you can use

    @Html.TextAreaFor(model => model.body, 5, 50,  new { @class = "form-control" } )

Works nicely!

answered Jul 31 '15 at 11:45

alikuli

526
6
18

score 3 · Answer 4 · answered Dec 05 '14 at 19:33

3

If you are using mvc and bootstrap try this:

@Html.TextAreaFor(model => model.Property, new { @class = "form-control", @rows = 5 })

answered Dec 05 '14 at 19:33

Ray Sun

301
2
10

editor-multiline-field did not work for me, but this answer did! Thanks. – pensum May 14 '20 at 23:46

score 2 · Answer 5 · answered Jul 04 '16 at 16:59

2

To adhere to a previously created view style, you can also do this:

<div class="col-md-10 editor-multiline-field">

answered Jul 04 '16 at 16:59

Mario Silveira

21
2

score 1 · Answer 6 · answered Jun 03 '14 at 21:08

1

try

@Html.TextAreaFor(model => model.Descricao, 5, 50, null)

in View Page

answered Jun 03 '14 at 21:08

user2268720

11
2

score 1 · Answer 7 · answered Sep 22 '16 at 12:44

1

I just wanna share in mvc 5

  @Html.EditorFor(model => model.Body, 
                  new {htmlAttributes = new {@style="width:yourdesiredwidth;"}
                   })

or use a custom class

answered Sep 22 '16 at 12:44

CyberNinja

872
9
25

How can I change the size of a multi-line editor-field?

7 Answers7

Linked