Функция Сетчатый макет позволяет размещать вопросы в многоколоночной сетке внутри группы с использованием тега внешнего вида gridformat<>. Это полезно для форм с плотным вводом данных, где несколько связанных полей должны располагаться рядом, а не вертикально.

Принцип работы

Сетчатый макет применяется на двух уровнях:

  1. Группа — установите appearance: field-list grid(weight=N) для определения количества столбцов сетки
  2. Каждое поле внутри группы — установите appearance: gridformat<row=R col=C colspan=S/> для позиционирования поля

Сетка использует 12-колоночную систему в стиле Bootstrap. weight=N определяет количество логических столбцов; каждый столбец занимает 12/N столбцов Bootstrap.

Внешний вид на уровне группы

Внешний видОписание
field-list grid(weight=2)2-колоночная сетка (каждый столбец = 6 столбцов Bootstrap)
field-list grid(weight=3)3-колоночная сетка (каждый столбец = 4 столбца Bootstrap)
field-list grid(weight=4)4-колоночная сетка (каждый столбец = 3 столбца Bootstrap)
field-list grid(weight=6)6-колоночная сетка (каждый столбец = 2 столбца Bootstrap)

Синтаксис gridformat<> на уровне поля 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
АтрибутОписание
rowНомер строки (начиная с 1)
colНомер столбца (начиная с 1, в пределах сетки, определённой weight)
colspanКоличество столбцов, которые занимает поле (по умолчанию 1)
backgroundcolorНеобязательный CSS-цвет фона поля (например, #f0f0f0, lightblue)

Пример: 2-колоночный раздел опроса домохозяйства

typenamelabelappearance
begin_groupdemographicsДемографияfield-list grid(weight=2)
textfirst_nameИмяgridformat<row=1 col=1/>
textlast_nameФамилияgridformat<row=1 col=2/>
integerageВозрастgridformat<row=2 col=1/>
select_one gendergenderПолgridformat<row=2 col=2/>
textaddressПолный адресgridformat<row=3 col=1 colspan=2/>
end_group

Отображается как:

  [ Имя               ] [ Фамилия            ]
[ Возраст           ] [ Пол                ]
[ Полный адрес (охватывает оба столбца)    ]

Пример: 3-колоночный ввод данных участка

typenamelabelappearance
begin_groupplot_dataДанные участкаfield-list grid(weight=3)
textplot_idID участкаgridformat<row=1 col=1/>
decimalarea_haПлощадь (га)gridformat<row=1 col=2/>
select_one crop_typecropТип культурыgridformat<row=1 col=3/>
decimalyieldУрожайность (кг)gridformat<row=2 col=1/>
decimalrevenueДоходgridformat<row=2 col=2/>
textnotesЗаметкиgridformat<row=2 col=3/>
end_group

Цвета фона

Используйте backgroundcolor для визуального разграничения разделов:

typenamelabelappearance
notesection_aРаздел Аgridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>

Лучшие практики

  1. Используйте сетчатый макет только для экранов с интенсивным вводом данных, где расположение полей рядом действительно сокращает прокрутку.
  2. Делайте поля с colspan=1 короткими (ID, коды, краткие варианты выбора) — широкие метки плохо смотрятся в узких ячейках сетки.
  3. Используйте colspan=N для полей с длинными метками или многострочным текстом.
  4. Тестируйте на наименьшем размере экрана, который могут использовать перечислители — 4-колоночная сетка тесна на телефоне.
  5. Сетчатый макет лучше всего подходит для веб-форм и планшетов; на мобильных телефонах обычно комфортна максимум 2-колоночная сетка.

Ограничения

  • gridformat<> работает только внутри группы с внешним видом grid(weight=N) — на верхнем уровне эффекта нет.
  • Сетчатый макет является расширением веб-формы rtSurvey и может некорректно отображаться в других ODK-совместимых клиентах.
  • Позиционирование строк и столбцов не проверяется при построении формы — перекрывающиеся поля будут отображаться оба, но могут выглядеть некорректно.
Была ли эта страница полезной?