Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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; }
like image 530
White Island Avatar asked Feb 25 '11 15:02

White Island


3 Answers

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;
}
like image 75
Darin Dimitrov Avatar answered Oct 25 '22 07:10

Darin Dimitrov


You can also use @Html.TextArea ou TextAreaFor

@Html.TextAreaFor(model => model.Text, new { cols = 25, @rows = 5 })
like image 45
Pedro Fillastre Avatar answered Oct 25 '22 07:10

Pedro Fillastre


In MVC 5 you can use

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

Works nicely!

like image 23
alikuli Avatar answered Oct 25 '22 08:10

alikuli