asp.net mvc adding css to editorfor?

Question

I'd like to change style of the 'editor for' textbox from MVC, specifically I want to make the textbox larger.

I've tried adding css a few ways, to no avail.

including :

<td class="myCss"><%=Html.EditorFor(x => x.NickName)%></td>

and

<td class="myCss"><%=Html.EditorFor(x => x.NickName, new { @class = "myCss" })%></td>

help pls!

possible duplicate of [asp.net mvc 2 EditorFor() and html properties](http://stackoverflow.com/questions/1625327/asp-net-mvc-2-editorfor-and-html-properties) — D'Arcy Rittich, Aug 05 '10 at 20:22
Is EditorFor a "requirement" or are you open to trying `TextBoxFor`/`TextAreaFor` ? — Chase Florell, Jul 13 '11 at 17:18

score 8 · Answer 1 · answered Aug 05 '10 at 20:59

robh,

it's difficult to know from your question whether you're looking for a 'generic' or specific solution within your project. as such, i'm going to address the generic - works once, works everywhere solution.

this entails taking a few steps (convention over configuration). basically here's what's required:

create new folder under 'views->shared called Editor Templates'
create a new usercotrol (ascx) files under that called 'string.ascx'

now, define that ascx file as per:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<div class="editor-label">
    <%= Html.LabelFor(model => model) %>
</div>
<div class="new-editor-field">
    <%= Html.TextBoxFor(model => model) %>
    <%= Html.ValidationMessageFor(model => model) %>
</div>

this will now make all 'string' based EditorFor() calls use this 'template'. simply make the class 'new-editor-field' reflect your desired css style for that field. obviously, cook as per your own requirement (i.e. you may not want the LabelFor tat etc..)

hope this helps - tho i have to say, this is just one of a few ways to do this (but is my prefered way).

enjoy

jim

score 3 · Answer 2 · answered Aug 28 '12 at 16:31

3

Rather than requiring your input field to have the class directly applied, you could use the following:

<div class="editor-field myCss">
    @Html.EditorFor(model => model.Nickname)
</div>

Which results in roughly the following HTML

<div class="editor-field myCss">
    <input class="text-box single-line" data-val="true" id="Nickname" name="Nickname" type="text" value="">
</div>

Then just use the CSS rule to style appropriately

.myCss input.text-box {font-size: 2em;}

answered Aug 28 '12 at 16:31

davewasthere

2,988
2
24
25

What if you're using a framework with pre-supplied Css classes.. you really need to be adding a class to the editorfor (so textboxfor seems to be the solution.) – Jimmyt1988 Apr 16 '14 at 09:10

Chase Florell · Answer 3 · 2010-08-05T22:08:58.470

2

Try this

<%= Html.TextBoxFor(x => x.NickName, new { @class = "myCss" })%>

or

<%= Html.TextAreaFor(x => x.NickName, new { cols = "40%", @class = "myCss" })%>

Now you can define your attributes because MVC knows what type to use (TextArea).

edited Aug 05 '10 at 22:08

answered Aug 05 '10 at 20:17

Chase Florell

46,378
57
186
376

2

I downvoted 1 because he specifically said he wanted to change the EditorFor behaviour, not TextBoxFor. – Rob Kent Jun 25 '11 at 13:38
I made a comment on the original question asking if `EditorFor` as a **Requirement**. – Chase Florell Oct 22 '11 at 21:48

score 2 · Answer 4 · answered Dec 08 '20 at 22:15

2

Try this

@Html.EditorFor(p => p.Name, new { htmlAttributes = new{ @class ="my-css-class"} })

answered Dec 08 '20 at 22:15

Sóstenes Dias Jr

51
3

score 0 · Answer 5 · answered Jul 01 '11 at 15:46

0

Place result of EditorFor inside a div with some class attribute on it, and inside style definition for this class, use !important directive to force accept desired values to anything inside that div.

answered Jul 01 '11 at 15:46

Sebastian

9
1

1

This did not work for me in MVC4. The style attribute on the DIV still does not take. – atconway Aug 16 '12 at 14:15

score 0 · Answer 6 · edited May 23 '17 at 12:33

0

Try this,

https://stackoverflow.com/a/4249988/505474

Copied from above link,

@model DateTime?

@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })

It works for me...

edited May 23 '17 at 12:33

Community

1
1

answered Jan 06 '12 at 07:35

K.Kirivarnan

828
9
15

asp.net mvc adding css to editorfor?

6 Answers6