Выравнивание полей переднего конца в приложении MVC - PullRequest
Новая
       4

Выравнивание полей переднего конца в приложении MVC

0 голосов
/ 20 января 2011

Итак, у нас есть приложение ASP.NET MVC 2. Проблема в том, что на нашем внешнем интерфейсе многие поля не похожи друг на друга. Я бы сказал, что около 90-95% полей, отображаемых пользователю, мы используем HTML Helpers. Мы также в основном используем новые, выпущенные в MVC 2, помощники «для», например, Html.DropDownListFor

Посмотрите на эту картинку: alt text

Они оба используют один и тот же помощник HTML, упомянутый выше. Вот код для этой конкретной картины: 

    <td class="leftRightBorder">
        <%= 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>

Вторая частота - это та, которую вы видите, другая - в таблице слева от этих двух выпадающих меню.

Как я могу установить общую длину для выпадающих, текстовых полей и т. Д. Во всем приложении, чтобы все выглядело согласованно и не было беспорядочно?

1 Ответ

3 голосов
/ 20 января 2011

используйте каскадную таблицу стилей для определения глобальных стилей для элементов HTML: 

select, textarea, input[type=text] { width: 300px; }

или для стиля только в пределах .leftRightBorder

.leftRightBorder select, 
.leftRightBorder textarea, 
.leftRightBorder input[type=text] 
{
    width: 300px; 
}
...