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是正确的高度，特别是因为成分列表的长度有些变化。这一切都感觉很尴尬和错误。最终我想要完成的是有一个双列显示，其中我的成分列表的复选框只要它需要和我的数据输入元素占用他们需要的任何高度与冰淇淋占用的空间的平衡description TextAreaFor元素。我有点像<table>这个想法，因为它以一种很好的方式（通常）提供了一些东西。我发现自己正在努力使<div> s使它们模仿表格，所以我避免使用它们进行这种类型的布局。我怀疑这可能仅仅是我以这种方式使用<div>的有限经验。你会如何改善这一点？我当然愿意使用<div>而不是<table>，如果这是实现这一目标的唯一方法，尽管我很沮丧，试图让他们做我想做的事。

Answer 1

我已经着手使用 autoresize.jquery.js jQuery插件，该插件非常适合我的需求。 ~~你可以在这里得到它~~ （见下文）

基本上，您通过执行以下操作引用要应用 autoResize 的TextArea：

$(myselector).autoResize();

所以，例如，我可以在我的视图中看到TextArea，如下所示：

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

然后执行此操作：

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

，TextArea会在用户输入时自动展开。我没有详尽地测试了这一点，但它似乎符合我的页面的费用。

显然，James Padolsey的插件链接已经死了。 您可以尝试this plug-in作为替代方案。它显然是基于原作。

拉伸TextAreaFor并处理未确定长度的列表

1 个答案: