CODEWITHSUNDEEP
htmlasp.net-mvc
hhay
hhay

Reputation: 231

asp.net mvc adding css to editorfor?

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!

Upvotes: 19

Views: 22920

Answers (6)

S&#243;stenes Dias Jr
S&#243;stenes Dias Jr

Reputation: 51

Try this

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

Upvotes: 2

davewasthere
davewasthere

Reputation: 3018

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

Upvotes: 3

K.Kirivarnan
K.Kirivarnan

Reputation: 828

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

Upvotes: 0

Sebastian
Sebastian

Reputation: 9

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.

Upvotes: 0

Chase Florell
Chase Florell

Reputation: 47377

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

Upvotes: 2

jim tollan
jim tollan

Reputation: 22485

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

Upvotes: 8

Related Questions