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

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

    <div class="form-group">
        <div class="col-md-10">
            <input type="submit" value="Submit Feedback" class="btn btn-default" />
        </div>
    </div>
}

Any advice or tips would be greatly appricated! thanks

The HTML rendered is (I removed name and value text for security reasons:

<form action="/feedback/create" method="post"><input name="" type="hidden" value="">        
<textarea name="Comments" id="Comments" rows="10" cols="60"></textarea>
<input name="UserName" id="UserName" type="hidden" value="" username="System.Security.Principal.WindowsIdentity">        

<div class="form-group">
        <div class="col-md-10">
            <input class="btn btn-default" type="submit" value="Submit Feedback">
        </div>
 </div>

EDIT:

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

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

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

Answer 3

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 4

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 5

You can add a class attribute:

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