Simon Price Simon Price - 1 year ago 318
ASP.NET (C#) Question

ASP.Net MVC TextAreaFor unable to change width

I am working with ASP.Net MVC for the first time and I am trying to set the width of a textarea.

This should (and most probably is) really simple, however the width of the area is not changing regardless of what I try.

So far I have tried the following:

@Html.TextAreaFor(m => m.RequestDetails, 10, 10, htmlAttributes: new {@class = "form-control", })
@Html.EditorFor(m => m.RequestDetails, new { htmlAttributes = new { @class = "form-control" } })
@Html.TextAreaFor(m => m.RequestDetails , new { @class = "form-control", @cols = 80, @rows = 10 })

I am able to change the number of rows no problem.

Initially I thought that this was down to bootstrap and the grid system so I took it out of the gird, and started again with all the above and got the same problem.

I have looked here:

  1. How to change width Html.TextBox

  2. TextAreaFor Cannot Set Width

  3. How to change width Html.TextBox

along with a few other Stack questions and everything that I would have thought would work hasn't.

The ViewModel of this particular property is

[Display(Name = "What is required")]
[StringLength(4000, MinimumLength=50, ErrorMessage="Please provide more information about your requirements")]
public string RequestDetails { get; set; }

I am looking to have this span the width of the div that it will be going in so would be very grateful for some help.

The last resort on this for me will be to use a HTML control rather than Razor and get the data in and out this way, but I do believe this should be easily possible with what I want. Its just me doing it wrong.


Answer Source

The problem here is dealing with max-width.

This is the correct implementation:

@Html.TextAreaFor(m => m.RequestDetails, 10, 10, htmlAttributes: new {@class = "form-control", })

All you have to do is give that text-area another class name and then in your CSS set a max-width of that class, like so:


@Html.TextAreaFor(m => m.RequestDetails, 10, 10, htmlAttributes: new {@class = "form-control width-textarea", })


    max-width: /* whatever you please */ !important

Let me know if this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download