Растяжение TextAreaFor и работа со списком неопределенной длины

Question

Я работаю над своим первым приложением ASP.NET MVC 3, и у меня есть страница, которая использует table для отображения двух столбцов элементов ввода. Это выглядит примерно так:

<table>
  <tr>
    <th> Description </th>
    <th> List </th>
  </tr>
  <tr>
    <td> @Html.TextAreaFor(model => model.Description, new { @class = "vert-stretch-edit" })   
   </td>
    <td rowspan="9"> @Html.EditorFor(model => model.Ingredients) </td>
  </tr>
  <tr>
    <th> Name</th>
  </tr>
  <tr>
    <td> @Html.EditorFor(model => model.Name) </td>
  </tr>
</table>

Здесь больше строк, чем я показываю, но идея здесь в том, что ингредиенты охватывают 9 строк во втором столбце, а в первом столбце есть ряд строк, состоящих из заголовков и элементов ввода.

Это работает достаточно хорошо, за исключением того, что я не могу заставить элемент TextAreaFor занимать всю высоту <td>, который его содержит. Таблица немного растягивается из-за количества элементов, отображаемых в списке ингредиентов, что не является идеальным, но и не является для меня ужасным.

Я пытался установить vert-stretch-edit так:

.vert-stretch-edit
{
   width: 100%;
   height: 100%;
}

но это ничего не решает по вертикали для меня. Я также попробовал это:

.vert-stretch-edit
{
   width: 100%;
   height: 200px;
}

но это не так идеально, поскольку я действительно не знаю, что 200px - это правильная высота, особенно потому, что список ингредиентов несколько изменчив по длине. Все это выглядит довольно неловко и неправильно. В конечном счете, я хочу добиться отображения в две колонки, где мой список флажков «Ингредиенты» занимает столько времени, сколько нужно, а элементы ввода данных занимают нужную высоту с балансом пространства, занимаемого мороженым. описание TextAreaFor элемент. Мне нравится идея <table>, потому что она излагает (в общем) приятные вещи. Я испытываю трудности с <div> s, чтобы сделать их имитирующими таблицы, поэтому я избегаю их для этого типа макета. Я подозреваю, что это может быть только мой ограниченный опыт использования <div> s таким образом. Как бы вы улучшили это? Я, конечно, открыт для использования <div> s вместо <table>, если это единственный способ сделать это, хотя я расстраиваюсь, пытаясь заставить их делать то, что я хочу.

Answer 1

Я получил доступ к autoresize.jquery.js jQuery плагину, который работает достаточно хорошо для моих нужд. вы можете получить его здесь (см. Ниже)

По сути, вы ссылаетесь на TextArea, к которому вы хотите применить autoResize , выполнивэто:

$(myselector).autoResize();

Так, например, у меня может быть TextArea на мой взгляд, например:

@Html.TextAreaFor(model => model.Notes, new { @id='mynotes' })

изатем сделайте это:

<script javascript>
$(document).ready(function() {
  $('#mynotes').autoResize();
});

и TextArea будет автоматически расширяться при вводе пользователем.Я не исчерпывающе не проверил это, но, похоже, подходит для моих страниц.

---

Видимо, ссылка на плагинДжеймс Падолси уже умер. Вы можете попробовать этот плагин в качестве альтернативы.Это очевидно основано на оригинале.