diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index 111085cf8..67e0024e3 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -586,6 +586,27 @@ type : 'UI Collection' +
Fields can be aligned to 16-columns grid
+Fields can be grouped to show related choices
diff --git a/src/collections/form.less b/src/collections/form.less index c3022099c..72d45dd18 100755 --- a/src/collections/form.less +++ b/src/collections/form.less @@ -556,6 +556,61 @@ padding-right: 1%; } +/* Fields grid support */ +.ui.form .fields.grid > .field { + width: 6.25%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .fields.grid > .one.wide.field { + width: 6.25%; +} +.ui.form .fields.grid > .two.wide.field { + width: 12.5%; +} +.ui.form .fields.grid > .three.wide.field { + width: 18.75%; +} +.ui.form .fields.grid > .four.wide.field { + width: 25%; +} +.ui.form .fields.grid > .five.wide.field { + width: 31.25%; +} +.ui.form .fields.grid > .six.wide.field { + width: 37.5%; +} +.ui.form .fields.grid > .seven.wide.field { + width: 43.75%; +} +.ui.form .fields.grid > .eight.wide.field { + width: 50%; +} +.ui.form .fields.grid > .nine.wide.field { + width: 56.25%; +} +.ui.form .fields.grid > .ten.wide.field { + width: 62.5%; +} +.ui.form .fields.grid > .eleven.wide.field { + width: 68.75%; +} +.ui.form .fields.grid > .twelve.wide.field { + width: 75%; +} +.ui.form .fields.grid > .thirteen.wide.field { + width: 81.25%; +} +.ui.form .fields.grid > .fourteen.wide.field { + width: 87.5%; +} +.ui.form .fields.grid > .fifteen.wide.field { + width: 93.75%; +} +.ui.form .fields.grid > .sixteen.wide.field { + width: 100%; +} + /* Swap to full width on mobile */ @media only screen and (max-width : 767px) { .ui.form .two.fields > .fields, @@ -565,7 +620,23 @@ .ui.form .four.fields > .fields, .ui.form .four.fields > .field, .ui.form .five.fields > .fields, - .ui.form .five.fields > .field { + .ui.form .five.fields > .field, + .ui.form .fields.grid > .one.wide.field, + .ui.form .fields.grid > .two.wide.field, + .ui.form .fields.grid > .three.wide.field, + .ui.form .fields.grid > .four.wide.field, + .ui.form .fields.grid > .five.wide.field, + .ui.form .fields.grid > .six.wide.field, + .ui.form .fields.grid > .seven.wide.field, + .ui.form .fields.grid > .eight.wide.field, + .ui.form .fields.grid > .nine.wide.field, + .ui.form .fields.grid > .ten.wide.field, + .ui.form .fields.grid > .eleven.wide.field, + .ui.form .fields.grid > .twelve.wide.field, + .ui.form .fields.grid > .thirteen.wide.field, + .ui.form .fields.grid > .fourteen.wide.field, + .ui.form .fields.grid > .fifteen.wide.field, + .ui.form .fields.grid > .sixteen.wide.field { width: 100%; padding-left: 0%; padding-right: 0%; @@ -579,7 +650,6 @@ padding-right: 0%; } - /*-------------------- Inline Fields ---------------------*/