CODEWITHSUNDEEP
c#asp.net-mvc-2editorfor
Craig
Craig

Reputation: 18734

MVC and EditorFor width

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

Upvotes: 28

Views: 68759

Answers (13)

Владимир
Владимир

Reputation: 1

ASP.Net MVC5

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

Upvotes: 0

Jordan B
Jordan B

Reputation: 119

For ASP.NET Core:

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

Upvotes: 0

GuyverZero
GuyverZero

Reputation: 1

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.

Upvotes: 0

Joe
Joe

Reputation: 1669

With BootStrap 3 

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

Upvotes: 7

Steven Frank
Steven Frank

Reputation: 621

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

Upvotes: 3

H20rider
H20rider

Reputation: 2282

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

Upvotes: 1

Sergio Caretta
Sergio Caretta

Reputation: 101

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

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

Upvotes: 9

Allen Song
Allen Song

Reputation: 21

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

Upvotes: -1

Patrik Lindstr&#246;m
Patrik Lindstr&#246;m

Reputation: 1147

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

Upvotes: 10

Joe Mancuso
Joe Mancuso

Reputation: 2129

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

Upvotes: 0

David Steele
David Steele

Reputation: 21

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

Upvotes: 2

Michael Maddox
Michael Maddox

Reputation: 12489

Instead of EditorFor, use TextBoxFor:

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

Upvotes: 38

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93464

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

Upvotes: 18

Related Questions