search

alphagov / govuk_elements

❗️GOV.UK Elements is deprecated, and will only receive major bug fixes and security patches.
https://govuk-elements.herokuapp.com/
MIT License
227 stars 90 forks source link

Radios with headings inside labels are misaligned #581

Closed dashouse closed 6 years ago

dashouse commented 6 years ago

Pointed out by gordonmcmullan_hmrc this example from Elements is misaligned

screen shot 2017-12-07 at 16 06 45

I believe this was affected by this PR (https://github.com/alphagov/govuk_elements/blob/8f88ccc46f7e71d2c8f4a56f4bac4beda1126cd5/assets/sass/elements/_elements-typography.scss) to add display: block to headings. It looks like that the margins we're previously collapsing, but with display: block; they are not.

Without display: block;

screen shot 2017-12-07 at 16 39 19

Would suggest contextually adjusting the heading classes within the labels rather than removing the display: block;

kr8n3r commented 6 years ago

and also removing that br

selfthinker commented 6 years ago

Or change the class of the span from heading-small to form-label-bold. That also makes more sense as it's not a heading but a label.

selfthinker commented 6 years ago

I fixed it in #591.