Fix for select height zoom problem #1018
Conversation
andysellick
force-pushed
the
fix-select-height-problem
branch
from
9e69ef1 to
04eaa63
Compare
andysellick
force-pushed
the
fix-select-height-problem
branch
from
04eaa63 to
cf41edd
Compare
| // Solution to text inside selects becoming unreadable if font size in | ||
| // the browser is increased. This is currently a problem in govuk-frontend | ||
| .gem-c-select { | ||
| .govuk-select { |
There was a problem hiding this comment.
It'd be good to catchup with @alex-ju I think you may need to cater for both cases:
- compatibility mode turned on
- compatibility mode turned off
I still think we could consider a fix upstream in govuk-frontend first?
There was a problem hiding this comment.
I still think we could consider a fix upstream in govuk-frontend first?
Yes, if that's an option. Sorry, the impression I had was that it wasn't. Happy to have that happen, although we need a fix quickly and I didn't want to put pressure on anyone.
There was a problem hiding this comment.
I've raised an issue in govuk-frontend but it's likely that their fix will not help on GOV.UK as we're using compatibility mode for elements and toolkit, and this issue apparently relates to the base font size.
I think I may have miscommunicated, we already output different units for the font scale depending on if the compatibility mode is set, we may be able to use similar logic to solve this issue too.
There was a problem hiding this comment.
Spoke with Andy, and we'll try for a long term fix on govuk-frontend but that shouldnt block quicker improvements here.
There was a problem hiding this comment.
I would recommend using a height: auto on <select> elements (I'm doing the same in Content Publisher). This also helps with making the <select multiple> version look like a list of things you can choose from without having to scroll the list with only one item visible at a time.
By doing it this way, a basic select will still render at 40px height by default.
Update: the 40px height will only be preserved when the compatibility mode is not enabled. Another good reason to work towards dropping legacy stuff.
|
@alex-ju this change shouldn't affect select multiples, should it? It's specific to the select component, which doesn't have a multiple option. I just want to check this won't break anything. |
|
@andysellick yep, sorry if I caused confusion, the select in |
|
@alex-ju have tested this with compatibility mode on and off, doesn't seem to make a difference, works fine in both. |
|
Needs a rebase so we can get it into 17.21.0 |
andysellick
force-pushed
the
fix-select-height-problem
branch
from
cf41edd to
047b0df
Compare
This was introduced in August 2019 [1] to mitigate an issue in GOV.UK Frontend where the height of a select component was set in pixels, which meant it did not scale if users changed the text size in their browser [2]. That issue was fixed in GOV.UK Frontend [3] and released as part of v3.3.0 [4] in October 2019. Since then the height of a select component has been set in rem (as long as compatibility mode is not enabled) which means this adjustment can be removed. [1]: #1018 [2]: alphagov/govuk-frontend#1519 [3]: alphagov/govuk-frontend#1574 [4]: https://github.com/alphagov/govuk-frontend/releases/tag/v3.3.0#:~:text=Pull%20request%20%231574%3A%20Make%20form%20elements%20scale%20correctly%20when%20text%20resized%20by%20user.
What
This is a fix for a problem noticed during user research where a participant had their phone text size set very high. This resulted in the text in the select component being cropped slightly. This can be reproduced using Firefox's 'zoom text only' option, and it looks like this:
I've raised an issue in govuk-frontend but it's likely that their fix will not help on GOV.UK as we're using compatibility mode for elements and toolkit, and this issue apparently relates to the base font size.
The problem is caused by the height of selects being set at 40px. The best solution seems to be to set the height using
em, so that it scales with the text size of the select. An alternative is to set it usingrembut since the component guide doesn't set a base font size this results in the height appearing differently there and in finder-frontend.I think (correct me if I'm wrong) that as long as there's an explicit font size on the select (which there is) even if it's specified using
em(which it is) as long as the height is greater than1em(which it is now) then the height of the select will always exceed the height of the text, so this problem shouldn't occur.Why
Well, it's broken.
Visual Changes
I've overridden the height of
40pxwith a height of2.14em, which appears to be the same, so there should be no visual changes. I'm pretty sure we're only using this component in finder-frontend, so we only need to test the search and finders pages.View Changes
https://govuk-publishing-compo-pr-1018.herokuapp.com/component-guide/select
Trello card: https://trello.com/c/VWJHWlBC/922-fix-facet-text-zoom-problem