Fieldset legend text can be clipped when using a custom or fallback font
See original GitHub issueThe SASS for .govuk-fieldset__legend
has a line that sets overflow: hidden
, as follows:
https://github.com/alphagov/govuk-frontend/blob/b52474c4c1c98c9886b48caafa3746bf7782859d/src/components/fieldset/_fieldset.scss#L25
From what I can tell the webkit bug this relates to was this one which was fixed over 6 years ago.
Having this in there can mean that if the NTA font isn’t present, the bottom of legends can get chopped off for larger font sizes, and the descenders in Arial end up overflowing the element and thus hidden.
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Using the fieldset and legend elements
In this blog Léonie explains the correct usage of the fieldset and legend elements. On GOV.UK we often use groups of related form...
Read more >css - How can I make a fieldset legend-style "background line ...
The text must match the overall background colour exactly, otherwise it will look weird. If you want any kind of padding on the...
Read more >Styling legend elements with CSS | 456 Berea Street
Styling legend elements with CSS. This demo page is related to the article Styling form controls with CSS, revisited. For more info on...
Read more >HTML Inputs and Labels: A Love Story | CSS-Tricks
Describe its companion input. A label wants to show everyone that it belongs with its input partner. · Be visible. A label can...
Read more >Use Legend and Fieldset - Adrian Roselli
Visually hide the <legend> and replicate its content into a node in the <fieldset> . Add aria-hidden="true" to that node.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’ve updated the title to make it focused on the problem as there may be a different solution to this issue, hope this is OK
Note that your example Andy has overriden font (since it’s not on a gov.uk domain), so the demonstration Glitch apps use a custom font.
Here’s what happens if you don’t use a custom font: