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)

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

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

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

Solution 4

You can add a class attribute:

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

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

View more solutions

Comments

[Murali Murugesan]

What is the rendered HTML in the page?

[MGot90]

I updated the question to show the HTML

[MGot90]

This almost worked but did I cannot set it to the full width of the div!

[MGot90]

This almost worked but did I cannot set it to the full width of the div!

[Which One]

If you add the form-control class to your textarea you can make the input expand to its parent container. I've updated my answer.

[MGot90]

I tried that (copied code from bootstrap API) and it still maxes out

[Ben Junior]

It worked for me as well. I don't think it is the perfect solution, but it is the only one I couold find so far. And I've searched....

[Ben Junior]

@Queti M. Porta What you said in your solution is true. Adding the form-control class will make the input expand to its parent control but only to a certain extend. It won't expand past a certain width.

[Ben Junior]

@MikeGO10590: Check that out: If you change max-width to 100% instead of 1000px you get the bootstrap resizing functionality back. You dont even need to bother setting the width.

[Tiago Deliberali Santos]

Really good point. I just removed textare from there and it worked.

[Jess]

This may have been fixed in BS3 since this question was asked. Using rows is the preferred answer. @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" }).

[MGot90]

Thanks @Jess I updated my answer to include your comment

[Scott Fraley]

Oh thank you thank you thank you!! That was it! (Stupid default Site.css!) What's really frustrating is that I'm pretty sure I've dealt with this before and apparently forgot. (D'OH!) ;)