Html.TextAreaFor width does not change

Question

How to change the width of a text area in an ASP.NET MVC view? Here I read questions about this problem, 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 apply except for the width of the text area. I also tried this:

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

But there is no result.

Answer 1

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

- You can use this code if you bind only one model to your look

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

--- OR ---

--- Use this code, you bind a model from the list of models.

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

:

1) , .

2) TextArea - . elementID. TextAreaFor elementID, .

Answer 2

HTML:

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

CSS

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

Answer 3

Try using the form-control-full property:

@Html.TextAreaFor(model => model.Value, new { @class = "form-control form-control-full", rows = 8})

Answer 4

I found this: on line 19 site.css

/ * Set the width for form input elements as they default to 100% width * /

input,

Select,

textarea {

max-width: 280px;

}

delete the text area in this.