Front end field alignment in MVC Application
So we have an ASP.NET MVC 2 application. The problem is, on our front end, a lot of fields don't like up with each other. I'd say with about 90-95% of the fields displayed to the user we are using HTML Helpers. We also mainly use the new ones released in MVC 2, the "for" helpers, for example, Html.DropDownListFor
Look at this picture:
These are both using the same HTML Helper, mentioned above. Here is the code for that specific picture:
<td class="leftR开发者_StackOverflowightBorder">
<%= Html.DropDownListFor(m => m.ResetDayComponent.ResetBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "ResetDayComponent.ResetBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
</tr>
<tr>
<td>Frequency</td>
<td class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FixedComponent.PaymentFrequency", onchange = "UpdateField(this);" })%>
</td>
<td />
<td>Frequency</td>
<td class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FloatingComponent.PaymentFrequency", onchange = "UpdateField(this);" })%>
</td>
The second frequency is the one you see, the other is in a table to the left of these two dropdowns.
How can I set a common length for dropdowns, text fields, etc. throughout the app so everything looks consistent and not messy?
use a cascading style sheet to define global styles for HTML elements:
select, textarea, input[type=text] { width: 300px; }
or to style only within .leftRightBorder
.leftRightBorder select,
.leftRightBorder textarea,
.leftRightBorder input[type=text]
{
width: 300px;
}
精彩评论