search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.16k stars 320 forks source link

Service name falls below GOV.UK in header when there is whitespace between the two divs #828

Closed pds2208 closed 6 years ago

pds2208 commented 6 years ago

ISSUE:

The example at: https://design-system.service.gov.uk/components/header/ for the service name example will put the service name underneath the GOV.UK header instead of alongside it. This is because the header code relies on a closing and opening div being on the same line.

EXPECTED BEHAVIOUR: The header should work correctly regardless of whether a div is on the same line or not.

REPRODUCE: Open your test page here in Chrome: https://design-system.service.gov.uk/components/header/with-service-name/index.html

Inspect element. To the left of: govuk-header__container govuk-width-container on the three dots right click and 'edit as HTML'

Go down to this line:

Move the second opening div <div class=... to a new line and click on the page. The service name moves to the next line.

NickColley commented 6 years ago

Thanks for helping us with this.

I see a few possible solutions:

  1. Use floats and clearfix
  2. Add comments into the template itself
  3. Don't pretty print html
  4. Do the font-size trick https://css-tricks.com/fighting-the-space-between-inline-block-elements/#article-header-id-3

It feels like 1. would be the most robust

pds2208 commented 6 years ago

Please don't do 2 or 3....