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

You left off px:

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