Asp.net MVC5 with Bootstrap EditorFor size

Question

I have some modifications to bring to a form which use EditorFor (and using MVC5) and I can't find the way of setting the size of the text box ... I tried the hard way with:

@Html.EditorFor(model => model.Nom, new{@style="width:400px"})

But this did not work.. Is there an easy way?

score 15 · Accepted Answer · answered Feb 23 '14 at 22:46

15

In MVC up to version 5, EditorFor does not allow you to specify html elements in that way. It can only be used in non-editor contexts, like TextBoxFor, etc...

In MVC 5.1 they added the ability to specify html attributes in Editor templates, and you can now do this:

@Html.EditorFor(model => model, new { htmlAttributes = new { @class = "form-control" }, })

answered Feb 23 '14 at 22:46

Erik Funkenbusch

92,674
28
195
291

Yes I tried this but I forgot to mention that the app use Bootstrap3 (perhaps it could bring troubles?) and whatever I changed with this method give no result, no attribute added only the class="text-box single-line" which is the html attibutes redered with the original code: @Html.EditorFor(model => model.Nom) – Alain BUFERNE Feb 24 '14 at 07:29
@AlainBUFERNE - As I said, this doesn't work with MVC5. You need MVC 5.1 for it to work. MVC 5.1 is completely bootstrap 3 compatible. – Erik Funkenbusch Feb 24 '14 at 08:06
Ooo, I jump over the .1 detail I will check that asap and let you know. Thanks – Alain BUFERNE Feb 24 '14 at 14:24
Ok, it's working now. I thank you to have insisted when I missed the .1 . Some details can change your life ....... – Alain BUFERNE Feb 24 '14 at 19:56
@ErikFunkenbusch This doesn't seem to work. `EditorForText` resize correctly based on `col-md-9` but when I change it to `EditorFor` the editor is only about half size. I'm using MVC 5.2.3. Any ideas? – Thierry May 28 '17 at 00:35
@Thierry - I think you mean TextboxFor, there is not EditorForText method. This should work, unless you have defined an EditorTemplate, in which case you have to handle the attributes yourself in the template. Verify whether or not the class is in the output html (view source to see), if not then you're doing something wrong. – Erik Funkenbusch May 28 '17 at 01:12
@ErikFunkenbusch It was a typo alirght. Only spotted it after 10 mins when feedback feedback but it wouldn't let me edit it. I'm not an export in asp.net mvc but I'm nearly 100% sure I'm not doing anything wrong. I'm literately replacing the "TextBoxFor" (which works) by "EditorFor". – Thierry May 28 '17 at 18:47
@Thierry - and that is where you are wrong. TextboxFor and EditorFor use different methods to accomplish putting html attributes on the generated output. TextboxFor looks like the example in the question at the top, but EditorFor uses the htmlAttributes naming, Look closely at both examples. – Erik Funkenbusch May 29 '17 at 06:02

score 7 · Answer 2 · answered Sep 01 '14 at 16:50

Using MVC 5 - You need to use [DataType(DataType.MultilineText)] attribute on your view model ejm:

using System.ComponentModel.DataAnnotations;

public class Requests
{

    [Display(Name = "Id")]
    public int RequestId { get; set; }

    [DataType(DataType.MultilineText)]
    public string Comments { get; set; }
}

score 2 · Answer 3 · edited May 23 '17 at 12:17

It is not a great idea to apply css class to EditorFor template because an EditorTemplate may can have many elements in that. What you can do is to apply your css thing inside your EditorTempalte file. Checkout this answer for more details.

But if you are simply trying to render a textarea, you may simply use the TextAreaFor helper method.

@Html.TextAreaFor(model => model.Nom, new { @class = "myCustomClass" })

and your css

.myCustomClass
{
  width:400px;
}

You may use !IMPORTANT if you specifically want to make sure that this css style overrides the eixsting style.

.myCustomClass
{
  width:400px !IMPORTANT;
}

score 1 · Answer 4 · answered May 26 '16 at 21:07

1

the same but in VB

@Html.TextBoxFor(Function(model) model.nit , New With {.class = "form-control"})

answered May 26 '16 at 21:07

Josue Morales

711
7
6

score 0 · Answer 5 · answered Apr 22 '17 at 16:34

0

If you want to apply it to all your EditorFor, just change the max-width in your Site.css from 280px to any other value. Example:

textarea {
/*max-width: 280px;*/
 max-width: 900px;
}

This worked for me in MVC 5.1

answered Apr 22 '17 at 16:34

Alvaro Pereira

603
6
8

Asp.net MVC5 with Bootstrap EditorFor size

5 Answers5

Linked