Width of my input fields in MVC3 - asp.net-mvc

Question

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

Answer 1

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>

Answer 2

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

Answer 3

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