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.18k stars 325 forks source link

Summary List Component renders actions incorrectly if first row don't have any actions specified #1545

Closed adamsz-lume closed 5 years ago

adamsz-lume commented 5 years ago

Below snippet renders the component incorrectly, ref to for a screenshot https://ukgovernmentdigital.slack.com/archives/C6DMEH5R6/p1567164598025800

Name
Sarah Philips
Date of birth
5 January 1978
Change date of birth
Contact information
72 Guild Street
London
SE23 6FH
Change contact information
Contact details

07700 900457

sarah.phillips@example.com

Change contact details
NickColley commented 5 years ago

Heya @adamszymaszczyk,

Can you give us more information why you want to remove this column?

Could you give a more real world example of where you're encountering this issue?

Thanks

NickColley commented 5 years ago

As noted in a Slack converstation, we handle this automatically with Nunjucks templates by placing a 'dummy element' where actions otherwise would be:

<span class="govuk-summary-list__actions"></span>

https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/summary-list/template.njk#L42

You can use this same approach in your own markup.

colinrotherham commented 5 years ago

@adamszymaszczyk If you swap this bit…

<!-- MISSING dd element with class govuk-summary-list__actions -->

With a dummy placeholder column:

<span class="govuk-summary-list__actions"></span>

It'll work again.

Unfortunately it's because we can't have colspan="2" with CSS display: table-cell 😬

36degrees commented 5 years ago

@adamszymaszczyk I'm going to move this issue to the govuk-frontend repo, as it relates to the component implementation

NickColley commented 5 years ago

I'm going to close this out since I think we've resolved your issues, if people run into this again we might need better guidance or to consider an approach which does not require these void elements.

Thank you for raising :)