Define minimum width for select component #2670
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
owenatgov
reviewed
Jun 28, 2022
| @@ -7,6 +7,7 @@ | |||
| @include govuk-font($size: 19, $line-height: 1.25); | |||
|
|
|||
| box-sizing: border-box; // should this be global? | |||
| min-width: 23ex; | |||
There was a problem hiding this comment.
I think your reasoning in the PR is sound. Is it worth trying to summarise that in a comment here?
There was a problem hiding this comment.
Added a code comment parroting my comment above.
Also added a changelog entry, currently listed as a fix, though I suppose this could also be a new feature, in a sense??
There was a problem hiding this comment.
Great, cheers! I see what you mean about it being a new feature potentially but my instinct is to keep it a fix as it's technically fixing the problem of the select not having a min-width.
querkmachine
force-pushed
the
select-min-width
branch
from
4cfc7ff to
e771379
Compare
vanitabarrett
suggested changes
Jun 29, 2022
querkmachine
force-pushed
the
select-min-width
branch
from
e771379 to
53e6d38
Compare
|
We've since merged a change to the Text Input component to use em units instead of ex. I've updated this PR to reflect that change. |
vanitabarrett
suggested changes
Jul 15, 2022
Co-authored-by: Vanita Barrett-Smith <vanita.barrett@digital.cabinet-office.gov.uk>
vanitabarrett
approved these changes
Jul 15, 2022
36degrees
changed the title
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a minimum width of the select component to account for situations where the value list may be loaded asyncronously, as requested in #2170.
As there is no 'standard' minimum width for selects, I opted to use 23 ex—equivalent to about 184 pixels wide on mobile, and 218 pixels wide on tablet and above.
I used 23 ex for a few reasons:
.govuk-input--width-10class applied..govuk-width-containerand still comfortably fit on screens 240 pixels wide, which is the narrowest screen resolution with any significant presence in GOV.UK's analytics (the narrowest to be in triple digits, anyway), and one apparently still used on modern feature phones(!)Comparisons
Mobile
Tablet/desktop