Question

I’m working on my first ASP.NET MVC 3 app and I’ve got a page that utilizes a table to display two columns of input elements. It looks something like this:

<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>

There are more rows than I’m showing here but the idea here is that the Ingredients span 9 rows in the second column and the first column has a bunch of rows made up of headers and entry elements.

This works well enough except that I cannot make the TextAreaFor element take up the entire height of the <td> that contains it. The table stretches out the rows a bit due to the number of items displayed in the Ingredients list, which isn’t ideal but isn’t horrible in my mind either.

I’ve tried to set the vert-stretch-edit like so:

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

but that doesn’t solve anything vertically for me. I’ve also tried this:

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

but that’s less that ideal as I don’t really know that 200px is the correct height, particularly since the list of Ingredients is somewhat variable in length. This all feels quite awkward and wrong. Ultimately what I want to accomplish is have a two-column display where my Ingredients list of checkboxes is as long as it needs to be and my data entry elements take up whatever height they need with the balance of the space taken up by the ice cream’s description TextAreaFor element. I kind of like the <table> idea because it lays things out (generally) in a nice way. I find myself struggling with <div>s to make them mimic tables so I avoid them for this type of layout. I suspect this may just be my limited experience using <div>s in this manner. How would you improve this? I’m certainly open to using <div>s instead of <table> if that’s the only way to accomplish this, though I get frustrated trying to make them do what I want.

Answer 1

I’ve landed upon using the autoresize.jquery.js jQuery plugin which works quite well for my needs. you can get it here (See below)

Essentially, you reference the TextArea that you which to apply autoResize to by doing this:

$(myselector).autoResize();

So, for example I could have a TextArea in my view like so:

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

and then do this:

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

and the TextArea will auto-expand as the user types. I haven’t exhaustively tested this out but it seems to fit the bill for my pages.

---

Apparently the link to the plug-in by James Padolsey is now dead.
You may want to try this plug-in as an alternative. It is evidently based on the original.