Fixing center select text on Safari #404
Open
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
mmircea16
requested review from
bvizureanu,
RaduCStefanescu and
surdu
as code owners
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/code4romania/stam-acasa/i8maktrx8 |
Utwo
approved these changes
May 1, 2020
|
I think only for a centered text inconsistency this is too much of a hack. Especially that the inconsistency it's only on Safari. |
surdu
approved these changes
May 1, 2020
catileptic
requested changes
May 3, 2020
There was a problem hiding this comment.
As per @Utwo 's comment, let's hang onto this PR for a while and not merge it. If it becomes a serious problem, we'll merge it.
(no actual changes requested, just needed a way to block merging)
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.
should close #396
Turns out that fixing issue around having the text on the select centered is not trivial - read more here: https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box/44499549
The recommended approach is using
text-align-lasthowever that is not supported on Safari. There are a couple of hacks possible, the one it seemed to be the least intrusive was to cover the select with aspanthat looks exactly like the select. Additionally, I have chosen to use the hack only when thetext-align-lastproperty is not supported by the browser to keep impact of the hack low.Also I put it here and not in the components library to make sure it works as expected - if it does and feel like this something that is more widely usable - we should move it to the components repo.
Testing:
Manual on firefox, chrome and safari - can someone please check in on IE11 and Edge?