Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Back link looks broken with increased text size #662

Open
davidhunter08 opened this issue Nov 30, 2020 · 2 comments · May be fixed by #922
Open

Back link looks broken with increased text size #662

davidhunter08 opened this issue Nov 30, 2020 · 2 comments · May be fixed by #922
Labels
back link 🐛 bug Something isn't working the way it should (including incorrect wording in documentation)

Comments

@davidhunter08
Copy link
Contributor

Bug Report

What is the issue?

When you increase the text size the back button text and icon become misaligned.

Screenshot 2020-11-30 at 10 48 36

What steps are required to reproduce the issue?

Increase the browser text size and view a page with a back link on.

What was the environment where this issue occurred?

  • Device: Macbook Pro
  • Operating System: Big Sur
  • Browser: Chrome
  • Browser version: Version 87.0.4280.67 (Official Build) (x86_64)
  • NHS.UK frontend package version: 4.0.0

Is there anything else you think would be useful in recreating the issue?

Possible solution

Adding margin: auto, bottom: 0 and top: 0 looks to solve the issue. Needs more testing though.

.nhsuk-back-link__link .nhsuk-icon__chevron-left {
    bottom: 0;
    height: 24px;
    left: -8px;
    margin: auto;
    position: absolute;
    top: 0;
    width: 24px;
 }

Screenshot 2020-11-30 at 10 49 36

Other considerations

It might also be worth reviewing the appearance of the back link, as it currently doesn't match the breadcrumb back link.

Breadcrumb back link example (with increased text size):

Screenshot 2020-11-30 at 10 52 12
@davidhunter08 davidhunter08 added 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) back link labels Nov 30, 2020
@davidhunter08 davidhunter08 changed the title Back link looks broken when you increase the text size Back link looks broken with increased text size Nov 30, 2020
@ghost ghost assigned chrimesdev Jan 14, 2021
@chrimesdev
Copy link
Member

chrimesdev commented Jan 14, 2021 •
edited
Loading

We also need to look at the placement of this within the page, it should be placed outside the <main> container. The current styles don't allow for this without causing unintended spacing. A number of applications are currently hot fixing this with;

<div class="nhsuk-back-link nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0">

or

.nhsuk-back-link {
  @include nhsuk-responsive-padding(4, 'top');
  margin-bottom: 0;
}

Guidance should be updated in the service manual and styles changed which means this would most likely be a breaking change.

@chrimesdev chrimesdev added this to the 5.0.0 milestone Jan 14, 2021
@chrimesdev
Copy link
Member

Similar issue with the Breadcrumb, Action link and Pagination when increasing the font size

Screenshot 2021-01-20 at 13 18 58

Screenshot 2021-01-20 at 13 20 13

Screenshot 2021-01-20 at 13 21 01

icons when increasing font size

@chrimesdev chrimesdev removed this from the 5.0.0 milestone Mar 4, 2021
This was referenced Apr 15, 2021
Open
Open
Open
Open
@chrimesdev chrimesdev removed their assignment Oct 26, 2021
pufferfish101007 added a commit to pufferfish101007/nhsuk-frontend that referenced this issue Feb 5, 2024
@pufferfish101007
[ref nhsuk#662] Ensure back link icon is in line with text
5e59254 
Ensures the back link chevron-left icon is vertically aligned with the
text at all font sizes.
pufferfish101007 added a commit to pufferfish101007/nhsuk-frontend that referenced this issue Feb 5, 2024
@pufferfish101007
[refs nhsuk#662] Align back breadcrumb icon with text
1500137 
This ensures that the back breadcrumb chevron icon is
vertically aligned with the text, even at large font sizes.
pufferfish101007 added a commit to pufferfish101007/nhsuk-frontend that referenced this issue Feb 5, 2024
@pufferfish101007
[refs nhsuk#662] Align action link icon with text
27bdda6 
Ensures that the action link icon is vertically aligned with the text,
even at large font sizes.
pufferfish101007 added a commit to pufferfish101007/nhsuk-frontend that referenced this issue Feb 5, 2024
@pufferfish101007
[refs nhsuk#662] Align pagination icon with text
40a1a07 
Vertically aligns the pagination icon with the pagination text, even
with large font sizes. This calculation was determined experimentally by
manually positioning the icons at a variety of font sizes, and succeeds
in appearing to vertically align the icon in the majority of cases, with
only very small font sizes looking slightly out of place. The removal of
`margin-top: 0` for `media-type: print` does not appear to affect the
output when printing.
@pufferfish101007 pufferfish101007 linked a pull request Feb 6, 2024 that will close this issue
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
back link 🐛 bug Something isn't working the way it should (including incorrect wording in documentation)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix misaligned icons pufferfish101007/nhsuk-frontend
2 participants
@chrimesdev @davidhunter08