开发者

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:

Front end field alignment in MVC Application

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; 
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜