TextAreaFor Cannot Set Width

Question

I cannot set the width or cols in atextarea. Rows/Height works just fine. can someone please help thanks!

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken(         


        

Answer 1

I had the same issue and found the following piece of CSS in my Site.css to be the cause (which I commented out).

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

Answer 2

This appears to be a fall back to prevent the scaffolded views generating full width entry forms.

However now we know that it is being set we can override it locally either in a class or directly on the element (shown purely for simplicity below).

The key is to remember to set max-width to override the one in site.css as well as the width CSS property.

@Html.TextAreaFor(model => model.Comments, 10, 120, htmlAttributes: new {style="width: 100%; max-width: 100%;" }) 

Answer 3

so I figured it out, I believe this is a problem with bootstrap imported to a ASP.NET MVC5 project. The answer is easy though. Just set CSS too

    max-width: 1000px;
    width: 1000px;

That fixes it for all datatypes. Textarea, input, etc.

**** UPDATE 8/26/2014 ****

Changed my answer to reflect on a comment posted. Use percentages rather then px to keep responsiveness. The CSS should be:

    max-width: 100%;
    width: 100%;

**** UPDATE 8/29/2016 ****

This was fixed with Bootstrap 3. Add the class form-control which applies the above styling

     @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" })

Answer 4

You can add a class attribute:

@Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10, @class="form-control" })

Answer 5

Your code works fine for me. Check out the fiddle demo

The problem would be with style=width:something

Better check the CSS and try to fix with the help of firebug/chrome console