Width of my input fields in MVC3

I just started using MVC3. I am using fields like this:

<div class="editor-field">
                    @Html.TextBoxFor(model => model.Status.RowKey, new { disabled = "disabled", @readonly = "readonly" })
                </div>

Which creates this HTML

<div class="editor-field">
                    <input disabled="disabled" id="Status_RowKey" name="Status.RowKey" readonly="readonly" type="text" value="0001" />
            </div>

But I notice all the input fields have the same width which is about 160px. Is there a way I can make them wider and why do they default to this. In my editor-field开发者_开发问答 class I

You could set the size property:

@Html.TextBoxFor(model => model.Status.RowKey, new { size = 200, disabled = "disabled", @readonly = "readonly" })

Probably more appropriate would be set the input width in css and give the textbox a class, like:

@Html.TextBoxFor(model => model.Status.RowKey, new { @class = "myClass", disabled = "disabled", @readonly = "readonly" })

<style>
  input.myClass { width = 200px; }
</style>

If your fields do not have any styling your browser will apply it's own default width to them. You need to add a style to them

By adding an external CSS file containing

div.editor-field input { width: 300px; }

Or by inline (not recomended)

@Html.TextBoxFor(model => model.Status.RowKey, new { disabled = "disabled", @readonly = "readonly", style="width:300px" })

You can use CSS for that.

For example:

input#StatusRowKey /* matches only the textfield with id StatusRowKey */
{
   width: 250px;
}
input              /* matches all input types */
{
   width: 200px;
}
input.Normal /* matches all input fields with class="Normal" */
{
   width: 100px;
}