TextAreaFor Cannot Set Width

TextAreaFor Cannot Set Width

I cannot set the width or cols in atextarea. Rows/Height works just fine. can someone please help thanks!
@using (Html.BeginForm())

@Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10})
@Html.HiddenFor(model => model.UserName, new { UserName = @User.Identity })


Any advice or tips would be greatly appricated! thanks
The HTML rendered is (I removed name and value text for security reasons:

I can set the width of the textarea via CSS but only to a certain exten ( maybe 15% of the screen)


Solution 1:

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

Related:  Responsive Bootstrap Datatable not collapsing columns at the correct point

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

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

Solution 3:

You can add a class attribute:

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

Solution 4:

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 */
textarea {
    max-width: 280px;

Solution 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

Related:  TinyMCE 4 links plugin modal in not editable