diff --git a/app/views/examples/example_radios_checkboxes.html b/app/views/examples/example_radios_checkboxes.html index d443e85a9..330848472 100644 --- a/app/views/examples/example_radios_checkboxes.html +++ b/app/views/examples/example_radios_checkboxes.html @@ -31,12 +31,13 @@

What is your nationality?

-

If you have dual nationality, select all options that are relevant to you.

-
- What is your nationality? + + What is your nationality? + If you have dual nationality, select all options that are relevant to you. +
@@ -123,18 +124,15 @@

- Which part of the Housing Act was your licence isued under? + Which part of the Housing Act was your licence issued under?

-

- Select one of the options below. -

-
- - Which part of the Housing Act was your licence isued under? + + Which part of the Housing Act was your licence issued under? + Select one of the options below.
diff --git a/app/views/guide_form_elements.html b/app/views/guide_form_elements.html index 0d8b0b2cc..01e59485a 100755 --- a/app/views/guide_form_elements.html +++ b/app/views/guide_form_elements.html @@ -194,6 +194,9 @@

Fieldsets and legends

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

+

+ Any general text which is important for filling in the form and cannot be put into a hint, should be in that legend (as shown in the checkbox example). But the legend shouldn't be too long either. +

Select boxes

diff --git a/app/views/snippets/form_checkboxes.html b/app/views/snippets/form_checkboxes.html index 373f71ebd..5d89d5c3d 100644 --- a/app/views/snippets/form_checkboxes.html +++ b/app/views/snippets/form_checkboxes.html @@ -1,10 +1,12 @@

Which types of waste do you transport regularly?

-

Select all that apply

- Which types of waste do you transport regularly? + + Which types of waste do you transport regularly? + Select all that apply +
diff --git a/app/views/snippets/form_inset_checkboxes.html b/app/views/snippets/form_inset_checkboxes.html index b56b4fb06..1f583a4d1 100644 --- a/app/views/snippets/form_inset_checkboxes.html +++ b/app/views/snippets/form_inset_checkboxes.html @@ -1,15 +1,15 @@

What is your nationality?

-

- Select all options that are relevant to you. -

- What is your nationality? + + What is your nationality? + Select all options that are relevant to you. +
diff --git a/assets/sass/elements/_elements-typography.scss b/assets/sass/elements/_elements-typography.scss index 044c22ce9..cbd518b7f 100644 --- a/assets/sass/elements/_elements-typography.scss +++ b/assets/sass/elements/_elements-typography.scss @@ -135,7 +135,8 @@ main { } // Text -p { +p, +.body-text { margin-top: em(5, 16); margin-bottom: em(20, 16); @@ -146,6 +147,10 @@ p { } +.body-text { + display: block; +} + // Lede, or intro text .lede { @include core-24; diff --git a/assets/sass/elements/_forms.scss b/assets/sass/elements/_forms.scss index 4e3dcaaac..fe5906d3e 100644 --- a/assets/sass/elements/_forms.scss +++ b/assets/sass/elements/_forms.scss @@ -20,6 +20,11 @@ fieldset { width: 100%; } +// Hack to let legends or elements within legends have margins in webkit browsers +legend { + overflow: hidden; +} + // Fix left hand gap in IE7 and below @include ie-lte(7) { legend {