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?

Solution 1

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" }, })

Solution 2

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; }
}

Solution 3

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;
}

Solution 4

the same but in VB

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

View more solutions

Comments

[Alain BUFERNE]

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)

[Erik Funkenbusch]

@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.

[Alain BUFERNE]

Ooo, I jump over the .1 detail I will check that asap and let you know. Thanks

[Alain BUFERNE]

Ok, it's working now. I thank you to have insisted when I missed the .1 . Some details can change your life .......

[Thierry]

@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?

[Erik Funkenbusch]

@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.

[Thierry]

@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".

[Erik Funkenbusch]

@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.