How do I set the width and height of a textarea using CSS?

Question

Here is my css:

.editor-field textarea {     width : 400;     height : 100px; } 

Here is the markup from my view:

        <div class="editor-field">             @Html.EditorFor(model => model.Visit.BehavioralObservations)             @Html.ValidationMessageFor(model => model.Visit.BehavioralObservations)         </div> 

And here is the annotation of my model showing the MultilineText attribute:

    [DisplayName("Behavioral Observations")]     [DataType(DataType.MultilineText)]     public string BehavioralObservations { get; set; } 

Why can't I set the width of this textarea? I can adjust the height in my CSS and it looks correct (verified with Chrome Developer tools) but the width doesn't change. Chrome says the width is an invalid property value and has a strike-through applied to the property along with a yellow triangle displayed adjacent to the property.

FYI, this is not limited to Chrome. IE8 has the same issue.

Thoughts? How do I fix this? Thanks!

Answer 1

try to use TextAreaFor helper method and set cols and rows html property

Sample

@Html.TextAreaFor(model=>model.MyMultilineText, new {rows="6", cols="10"}) 

I Hope this help. Regards.