Html.TextAreaFor width doesn't change

Question

How to change text area width in ASP.NET MVC View? I read questions about this problem here, but nothing helped.

@Html.TextAreaFor(m => m.Suggestions, new { @class = "text-area", placeholder = "Unesite svoje prijedloge..." })

CSS:

.text-area {
    width:50%;
    height:100px;
    color:#3A3A3A;
    font-weight:bold;
    font-style:italic;
}

All styles are applied except this for text area width. I also tried this:

@Html.TextAreaFor(m => m.Suggestions, new { rows = "7", cols = "70", @class = "text-area", placeholder = "Unesite svoje prijedloge..." })

But no result.

Answer 1

Open developer tools and find the input element in your browser. Look to see if there is a max-width property set on your TextArea element. If so then all you need to do is us the following code to overwrite it.

-- You can use this code if you are only binding a single model to your view

@Html.TextArea("NameOfElement", Model.propertyName, new {style = "max-width:100% !important;"})

--- OR ---

--- Use this code is you are binding a model from a list of models

@Html.TextAreaFor(m => m.propertyName, new {style="max-width:100%", @id = "ElementId"})        

Note:

1) If you use the above value for the max width it will inherit from the parent container.

2) The first parameter in the TextArea help is the name of the element. It also assigns the name as the elementID. In the TextAreaFor you have to explicitly assign the elementID as shown above.

Answer 2

HTML:

<form id="myform">
<textarea value="">
</textarea>
</form>

CSS:

#myform textarea{
Width: 50%;
height: 100px;
}