On this page
manage_search
Сітковий макет
Сітковий макет дозволяє розміщувати поля в CSS-сітці всередині групи, забезпечуючи багатоколонкові дизайни форм.
Функція Сітковий макет дозволяє розміщувати питання в багатоколонковій сітці всередині групи за допомогою тегу appearance gridformat<>. Це корисно для форм з інтенсивним введенням даних, де кілька пов’язаних полів повинні відображатися поруч замість вертикального стека.
Як це працює
Сітковий макет застосовується на двох рівнях:
- Група — встановіть
appearance: field-list grid(weight=N)для визначення кількості стовпців сітки - Кожне поле всередині групи — встановіть
appearance: gridformat<row=R col=C colspan=S/>для позиціонування поля
Appearance рівня групи
| Appearance | Опис |
|---|---|
field-list grid(weight=2) | 2-колонкова сітка |
field-list grid(weight=3) | 3-колонкова сітка |
field-list grid(weight=4) | 4-колонкова сітка |
field-list grid(weight=6) | 6-колонкова сітка |
Синтаксис gridformat<> рівня поля
gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
| Атрибут | Опис |
|---|---|
row | Номер рядка (починаючи з 1) |
col | Номер стовпця (починаючи з 1) |
colspan | Кількість стовпців, що займає поле (за замовчуванням 1) |
backgroundcolor | Необов’язковий CSS-колір фону поля |
Приклад: 2-колонковий розділ опитування домогосподарства
| type | name | label | appearance |
|---|---|---|---|
| begin_group | demographics | Demographics | field-list grid(weight=2) |
| text | first_name | First name | gridformat<row=1 col=1/> |
| text | last_name | Last name | gridformat<row=1 col=2/> |
| integer | age | Age | gridformat<row=2 col=1/> |
| select_one gender | gender | Gender | gridformat<row=2 col=2/> |
| text | address | Full address | gridformat<row=3 col=1 colspan=2/> |
| end_group |
Найкращі практики
- Використовуйте сітковий макет лише для екранів з інтенсивним введенням даних, де поля поруч дійсно зменшують прокрутку.
- Зберігайте
colspan=1для коротких полів — широкі мітки погано відображаються у вузьких стовпцях сітки. - Тестуйте на найменшому екрані, який використовуватимуть анкетери.
- Сітковий макет найкраще підходить для веб- та планшетних форм-факторів.
Обмеження
gridformat<>працює лише всередині групи з appearancegrid(weight=N).- Сітковий макет є розширенням веб-форм rtSurvey та може не відображатися правильно в інших клієнтах, сумісних з ODK.
Чи була ця сторінка корисною?