MVC and EditorFor width

Question

Can I set the width of an EditorFor control on my View?

I have set a few parameters:

[Required, DisplayName("Payee Name"), StringLength(50)]
public string Name { get; set; }

However, I can't seem to set the width of the textbox that gets rendered.

<table width="300" border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <%=Html.LabelFor(m => m.Name)%>
        </td>
        <td>
            <%=Html.EditorFor(m => m.Name)%>
        </td>
    </tr>

Can this be done somehow?

I tried:

<%=Html.EditorFor(m => m.Name, new {width=50)%>

But no joy...

score 37 · Accepted Answer · answered Jul 05 '11 at 14:58

37

Instead of EditorFor, use TextBoxFor:

<%=Html.TextBoxFor(m => m.Name, new {style = "width:50px"})%>

answered Jul 05 '11 at 14:58

Michael Maddox

12,331
5
38
40

1

That's not a full proof solution. What if we want the control to be a calendar control? TextBoxFor will not render dynamic Field. – deepak samantaray Jun 19 '19 at 06:43

score 18 · Answer 2 · answered Jan 18 '11 at 06:22

18

What's wrong with using CSS to style your control width?

answered Jan 18 '11 at 06:22

Erik Funkenbusch

92,674
28
195
291

That sounds good - but, how? I'd like to have it as a CSS, to have a generic setting for my controls. – Craig Jan 18 '11 at 06:23
2

@cdotlister - Try this: `<%= Html.EditorFor(m => m.Name, new { @class = "myCss" })%>` then in your .css file have `input.myCss {width: 50em;}` – Erik Funkenbusch Jan 18 '11 at 06:32
1

I did that, but the control renders like this: – Craig Jan 18 '11 at 06:37
2

@cdotlister - Oh, sorry, didn't pay close enough attention. EditorFor uses a template to create the class, so you don't have control over the attributes unless you create your own Editor template. Use TextBoxFor and LabelFor to do it yourself, and that will accept the new parameter. Otherwise, you will have to create a custom editor template. – Erik Funkenbusch Jan 18 '11 at 06:42

score 10 · Answer 3 · answered Jun 24 '15 at 20:49

In mvc 5 there is setting in site.css that sets the max-width=200 for all textareas. That confused me until i found this blogpost. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap as Paul Litwin puts it:

Yes, Microsoft is for some reason setting the maximum width of all input, select, and textarea controls to 280 pixels. Not sure the motivation behind this, but until you change this or overrride this by assigning the form controls to some other CSS class, your controls will never be able to be wider than 280px.

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

So you if you are a pragmatic you change the max-width to eg 600px

I searched "280 pixel limit on text boxes" and similar things for MVC and couldn't find much until I found this buried comment. This was incredibly frustrating just to find it here :( Thanks for the right direction, upping this max limit has allowed me to actually design my site :) — Kurtis Cochrane, Nov 09 '15 at 16:35
I wouldn't imagine that textarea class could reflect an input element, but yeah. That did it! — st_stefanov, Aug 13 '18 at 09:35

score 8 · Answer 4 · edited Oct 02 '16 at 18:22

8

Replace <%=Html.EditorFor(m => m.Name, new {width=50)%> for this

<%=Html.EditorFor(m => m.Name,new { htmlAttributes = new { style = "width: 50px" }, }

edited Oct 02 '16 at 18:22

Eiko

25,601
15
56
71

answered Oct 02 '16 at 18:00

Sergio Caretta

81
1
2

score 7 · Answer 5 · edited Jul 04 '17 at 20:56

7

With BootStrap 3

@Html.EditorFor(model => model.PriceIndicatorDesc, new { htmlAttributes = new { @class = "form-control", @style = "width:280px" } })

edited Jul 04 '17 at 20:56

Phil3992

1,059
6
21
45

answered Mar 17 '16 at 15:30

Joe

1,649
12
10

score 3 · Answer 6 · answered Mar 03 '17 at 18:19

As previously mentioned, the place you want to go is in site.css

input,
select,
textarea {
    max-width: 280px;
}

You can set any default value you want there or remove the block to get the Bootstrap default of 100%. Personally, I added the following options so I could easily make some changes based on the control and field in question:

.form-control-25 {
    max-width: 25%;
}

.form-control-50 {
    max-width: 50%;
}

.form-control-75 {
    max-width: 75%;
}

.form-control-100 {
    max-width: 100%;
}

score 2 · Answer 7 · answered Oct 11 '11 at 10:57

2

You may need to add "!important" to the css attribute to ensure that it overrides the default for TextBoxFor e.g. width:50px !important;

answered Oct 11 '11 at 10:57

David Steele

21
1

score 1 · Answer 8 · answered Feb 27 '17 at 14:47

1

Patrik Lindström is correct with the Max-width.

I was able to get around this by setting the max-width and width

@Html.EditorFor(model => model.Source, new { htmlAttributes = new { @class = "form-control", @placeholder = "Source",  @style = "width: 900px;max-width: 900px;" } })

answered Feb 27 '17 at 14:47

H20rider

2,162
5
29
47

>>> YES <<<. This is the right answer for the question asked. This works for me: @Html.EditorFor(model=>model.BusinessAddress, new { htmlAttributes = new { @style = "width: 1000px;max-width: 1000px;" } }) – userSteve Jan 19 '23 at 17:26

score 0 · Answer 9 · answered Apr 24 '13 at 22:27

If you need a custom width outside of a normal CSS rule and you are using Editor Templates you can do

<%=Html.EditorFor(m => m.Name, new { Width = 50})%>

Then in your editor template for String add this to your template

@Html.TextBox(s => {
...
    if (ViewBag.Width != null )
    {
       s.Width = ViewBag.Width;
    }
 }).Bind(Model).GetHtml()

score 0 · Answer 10 · edited Oct 09 '18 at 13:08

0

In your CSS file for Site.css, the default max-width is 280px if you had VS auto generate everything for you when you first created the MVC Project. No matter how large of a width you set your @html.editorfor with a given id, it is limited by the below syntax.

input,
select,
textarea{
     max-width:280px
}

You can change it here by giving it a new max-width or max-height.

edited Oct 09 '18 at 13:08

Suraj Rao

29,388
11
94
103

answered Oct 09 '18 at 13:01

GuyverZero

1

score 0 · Answer 11 · answered Feb 02 '19 at 19:21

0

For ASP.NET Core:

<%=Html.TextBoxFor(m => m.Name, new { htmlAttributes = new { style = "width: 50px" } })%>

answered Feb 02 '19 at 19:21

Jordan B

109
8

score -1 · Answer 12 · edited Sep 08 '16 at 07:58

Above answer Yes and No. We need to use develop tool to check what styles used and modify them, they may have max-width, width; Then create own !important css to apply it, my case:

<style>
    textarea,
    input[type='text'],
    .form-group,
    .form-group-lg,
    .form-horizontal,
    .form-control,     
    .text-box,
    .single-line,
    .multi-line{
        width: 800px !important;
        max-width: 1000px !important;
    }
    .multi-line{
        height: 300px !important;
    }
    .form-horizontal{
        position:absolute;
        padding-left:15%;
    }
</style>

see attached image result.

enter image description here

MVC and EditorFor width

12 Answers12

Linked