Как установить ширину и высоту текстового поля с помощью CSS?

Вот мой css:

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

Вот разметка из моего представления:

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

И вот аннотация моей модели, показывающая атрибут MultilineText:

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

Почему я не могу установить ширину этого текстового поля? Я могу настроить высоту в моем CSS и выглядит корректно (проверено с помощью инструментов Chrome Developer), но ширина не меняется. Chrome говорит, что ширина является недопустимым значением свойства и имеет пробой, примененный к этому свойству вместе с желтым треугольником, отображаемым рядом с этим свойством.

FYI, это не ограничивается Chrome. IE8 имеет ту же проблему.

Мысли? Как это исправить? Спасибо!

Ответы

Ответ 1

Вы остановились px:

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

Ответ 2

попробуйте использовать вспомогательный метод TextAreaFor и установите cols и rows свойство html

Пример

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

Я надеюсь эта помощь. С наилучшими пожеланиями.

Ответ 3

По прошествии некоторого времени поиска его лучше всего использовать одну из перегрузок метода TextAreaFor()

@Html.TextAreaFor(model => model.Visit.BehavioralObservations, 10, 40, new { HtmlAttributes = new { } })

10 - количество строк, 40 - число столбцов

Ответ 4

Стиль

может быть указан в ссылке

@Html.TextAreaFor(model = > model.values, new {style = "width: 700px; height: 200px;" })

Ответ 5

Код:

@Html.TextAreaFor(m => m.Message, 30, 10, new { @class = "what" })

Ответ 6

Проект MVC по умолчанию для ASP MVC имеет site.css с max-width:280 для textarea - удалите это и попробуйте что-то вроде этого

@Html.TextAreaFor(model => model.ComicText, new { style = "width: 700px; height:150px;" })