グリッドレイアウト機能を使用すると、gridformat<>外観タグを使用して、グループ内に質問を複数列グリッドに配置できます。これは、関連する複数のフィールドが縦に積み重なるのではなく並んで表示されるべき密なデータ入力フォームに便利です。

仕組み

グリッドレイアウトは2つのレベルで適用されます：

  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列番号（weightで定義されたグリッド内で1ベース）
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_id農地IDgridformat<row=1 col=1/>
decimalarea_ha面積（ha）gridformat<row=1 col=2/>
select_one crop_typecrop作物タイプgridformat<row=1 col=3/>
decimalyield収穫量（kg）gridformat<row=2 col=1/>
decimalrevenue収入gridformat<row=2 col=2/>
textnotesメモgridformat<row=2 col=3/>
end_group

背景色

backgroundcolorを使用してセクションを視覚的に区別する：

typenamelabelappearance
notesection_aセクションAgridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>

ベストプラクティス

  1. 並んで表示されるフィールドが実際にスクロールを削減するデータ入力集中型の画面にのみグリッドレイアウトを使用してください。
  2. colspan=1のフィールドは短くしてください（ID、コード、短い選択）— 幅の広いラベルは狭いグリッド列では切り詰められます。
  3. 長いラベルや複数行テキスト入力のフィールドにはcolspan=Nを使用してください。
  4. 調査員が使用する最小スクリーンサイズでテストしてください — 4列グリッドはスマートフォンでは窮屈です。
  5. グリッドレイアウトはWebとタブレットのフォームファクターで最もよく機能します；モバイルスマートフォンでは通常2列レイアウトが最大の快適な幅です。

制限事項

  • gridformat<>はgrid(weight=N)外観を持つグループ内でのみ機能します — トップレベルでは効果がありません。
  • グリッドレイアウトはrtSurvey Webフォーム拡張機能であり、他のODK互換クライアントでは正しくレンダリングされない場合があります。
  • 行と列の配置はフォームビルド時に検証されません — 重複するフィールドは両方ともレンダリングされますが、壊れているように見える場合があります。
このページは役に立ちましたか？