CODEWITHSUNDEEP
asp.net-mvc-3cssrazor
Skindeep2366
Skindeep2366

Reputation: 1559

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

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

Upvotes: 1

Views: 3117

Answers (2)

user338195
user338195

Reputation:

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

Upvotes: 0

Chase Florell
Chase Florell

Reputation: 47367

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

Upvotes: 1

Related Questions