Adjusting the size of a editorfor box using inline css or site.css file

Question

I have a mvc 3 app that uses Razor.There are several forms on the site where information is requested from the user. The problem is some of these boxes need to be longer than others.. I am lost on how to change the width of specific editorFor boxes using css.. The below box is an example of one of the boxes...

        <tr>

    <td>@Html.EditorFor(Function(model) model.School_Title)
        @Html.ValidationMessageFor(Function(model) model.School_Title)</td>
    <td> @Html.EditorFor(Function(model) model.Short_Name)
        @Html.ValidationMessageFor(Function(model) model.Short_Name)</td>

  </tr>

Any help would be greatly appreciated...

Chase Florell · Accepted Answer · 2011-10-11 19:43:00Z

1

This has been answered a few times in different scenarios here on SO. Basically, you cannot add CSS directly to an EditorFor()

I would HIGHLY suggest using Editor Templates. It's definitely the "right" way to style your EditorFor.

You can tell a model property to use an Editor Template in two different ways.

The first (the simplest) is to create an editor template for a certain data type - DateTime for example.
The second way to do it is to set it declaratively in your DataAnnotations by using a UIHint.

Alternatively, if you're hung up on using inline CSS for your Editor, you will need to use TextBoxFor()

@Html.TextBoxFor(Function(model) model.School_Title, New With {.class = "CustomCssAttribute" }))

edited Oct 11, 2011 at 19:43

answered Oct 11, 2011 at 19:37

Chase Florell

47.6k59 gold badges192 silver badges382 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skindeep2366 Over a year ago

Thanks for the help.. I was in the dark about editor templates even existing in mvc 3..

score 0 · Accepted Answer · 2011-10-11 19:59:38Z

0

School_Title is a text field. Editor for a text field will generate HTML text input element.

HTML input can be styled by adding the following into your site.css

input[type="text"]{
   background-color: gray;
   color: white;
}

This will apply to all text inputs that use site.css stylesheet.

Alternative solution is to apply a CSS class through HTML attributes. For example:

@Html.TextBoxFor(model => model.School_Title, new { @class: "myStyle" })

In your site.css you'll need to add your style:

.myStyle
{
   background-color: gray;
   color: white;
}

You shouldn't be scared of editors. The only way to get used to them, is to write your own editor. Write an editor that creates a div with some styling. Built-in editors for text fields are no different. They promote encapsulation and code re-usability. Eventually you should see a need to write editors for object graphs.

For example, I may have a view model that contains customer details. If I want to create or update customer details, I'll use @Html.EditorFor(model => model, "Customer"), or if I want to display details of a customer, I'll use

@Html.DisplayFor(model => model, "Customer")

edited Oct 11, 2011 at 19:59

answered Oct 11, 2011 at 19:33

user338195

4 Comments

Chase Florell Over a year ago

The OP says "The problem is some of these boxes need to be longer than others"... which means that a blanket CSS setting will not work

Chase Florell Over a year ago

Just noticed your edit. Unfortunately you're wrong in the adding the class to the EditorFor() as it will not work. You have to use an EditorTemplate or a TextBoxFor()

user338195 Over a year ago

I was aiming to give an example where we can assign a class through EditorFor. You can then change colours, size of the box etc through CSS. I can't remember whether it's EditorFor or TextBoxFor as I'm writing this in notepad, sorry.

Chase Florell Over a year ago

EditorFor does not allow this. It has to be done in a template or a TextBoxFor... Please see my answer.

Collectives™ on Stack Overflow

Adjusting the size of a editorfor box using inline css or site.css file

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related