Width of my input fields in MVC3

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

possible duplicate of how to set width of html.textboxfor?

Dan Puzey
– Dan Puzey

2012-09-06 12:00:20 +00:00
Commented Sep 6, 2012 at 12:00 — Dan Puzey
– Dan Puzey, Commented Sep 6, 2012 at 12:00

bkaid · Accepted Answer · 2011-05-06 15:33:26Z

2

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>

answered May 6, 2011 at 15:33

bkaid

52.2k23 gold badges115 silver badges128 bronze badges

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

2 Comments

JonWylie Over a year ago

Thank you. Is there a way I can directly set the width in the first line without using a class?

JonWylie Over a year ago

Thanks. I just saw u also told me how to do that. Works great

David Glenn · Accepted Answer · 2011-05-06 15:35:19Z

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

answered May 6, 2011 at 15:35

David Glenn

24.6k19 gold badges76 silver badges96 bronze badges

Comments

Rhapsody · Accepted Answer · 2011-05-06 15:33:54Z

1

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

answered May 6, 2011 at 15:33

Rhapsody

6,0772 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

Width of my input fields in MVC3

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related