CODEWITHSUNDEEP
c#htmlasp.netasp.net-mvc
Simon Price
Simon Price

Reputation: 3261

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. asp.net-mvc How to change width Html.TextBox

  2. TextAreaFor Cannot Set Width

  3. asp.net-mvc 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")]
[DataType(DataType.MultilineText)]
[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. Thanks

Simon

Upvotes: 1

Views: 3842

Answers (2)

Pranay
Pranay

Reputation: 430

<style>
    .areaWidth
    {
        width: 100px;
    }
</style>

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

Upvotes: 0

Grizzly
Grizzly

Reputation: 5953

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:

Razor/HTML

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

CSS

.width-textarea{
    max-width: /* whatever you please */ !important
}

Let me know if this helps!

Upvotes: 4

Related Questions