logo

[ELMA4] Формы

Форму можно инициализировать двумя способами.

Вариант 1:

@using (Html.TableForm())
{
    <tr>
        <td class="captionCell"></td>
        <td></td>
    </tr>
}

Вариант 2:

@Html.TableFormStart()
    <tr>
        <td class="captionCell"></td>
        <td></td>
    </tr>
@Html.TableFormEnd()

Для форм добавлена адаптивность, но она применяется только в двух вариантах. Поэтому форму следует корректно формировать. При использовании варианта 2 адаптивность настраивается вручную.

@Html.TableFormStart()
// Вариант 1
    <tr>
        <td class="captionCell"></td>
        <td></td>
        </tr>
// Вариант 2
    <tr class="full-row">
        <td colspan="3"></td>
    </tr>
@Html.TableFormEnd()

Класс captionCell используется для стилизации имени поля.

При использовании класса full-row ячейка будет занимать всю ширину tr.

Примечание
Если внутри формы для поля задать строгую ширину, адаптивность работать не будет.
@Html.TableFormStart()
//Bad
    <tr>
        <td class="captionCell"></td>
        <td>@Html.Editor(m => m.Item, a => { a.Html.style.width = "500px"; })</td>
    </tr>
//Good
    <tr>
        <td class="captionCell"></td>
        <td>@Html.Editor(m => m.Item)</td>
    </tr>
@Html.TableFormEnd()

У форм отсутствует внешний отступ. Для правильного отображения формы ее нужно поместить в div с классом general-form-container.

<div class ="general-form-container">
    @Html.TableFormStart()
        //some-code
    @Html.TableFormEnd()
</div>