I've followed the typical way a form has been setup in an application, which is to use a table that looks like this:
<table>
<tbody>
<tr>
<td>Field</td>
<td>@Html.TextBox("Field")</td>
</tr>
<tr>
<td>Field 2</td>
<td>@Html.TextBox("Field2")</td>
</tr>
</tbody>
</table>
Which produces a format like:
Field <TextBox>
Field <TextBox>
Most mobile designs lay it out this way:
Field
<TextBox>
Field
<TextBox>
Which is something I need to do because some of my forms are too long to display in a mobile browser. Is there an easy way to set this up? Maybe there is a way to make each cell render on a new line, which would work for me? Something cross-browser supported?
Or is a redesign necessary?
Yea you can do something like this drop the table display for smaller viewports:
@media (max-width:40em) {
table, thead, tbody, tfoot, th, td, tr { display:block; }
tr + tr { margin-top:1em; }
}