-
-
Notifications
You must be signed in to change notification settings - Fork 988
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.
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
UX: Discussion of usage of set font-sizes in CSS #1018
Comments
I think one of the issues was that with a smaller font, the screen on mobile devices used to zoom, which was reported as an issue previously (if I remember correctly). I would actually rather use |
Well I can expand some on that behavior. IOS (probably android as welö, don't have a handset available atm) do zoom on form components if they are deemed to small. However I think it should be up to the developer of the page to set how this should behave. You can set meta tags that decides if the page should zoom on forms or not (or rather zoom if some expression somewhere in the used browser deems the input too small). Setting that on a component could create irregular/inconsistent behavior between different parts of a form. Example: Regarding percentage vs rem: Example: We could however use em instead of percentage/rem. Em are relative to its closest declaration. Thus it will scale in the above example. I am all for leaving sensible defaults that behaves the same way as any standard component would do. I can provide a PR with ems instead of %. I could probably update my previous PR (or would you like a new one?). |
A separate PR would be more preferable. I’m still kind of worried about using |
I just came across vue-multiselect, and it looks great! However, I am not able to use this because the font-size is way too big for our web app, and it doesn't scale accordingly to the parent font-size. I think switching to |
That is a great idea actually. I hope to work on a next major release in December. |
An issue with the current multiselect setup is that the font-sizes are defined within the CSS for the component itself.
This could affect usage in a few ways:
This should be the desired behaviour, enforcing 16px at all times (like current versions) have negative effects on the expected behaviour of the component (IMO). The component should scale with whatever font size its container is set to (be it HTML root font-size, a h1 tag or a specific class set to a container around the multiselect element).
A few CSS fixes would handle this fine. No explicit font-size should be set for the following classes:
For the following classes it should be changed to a percentage based value:
font-size: 87.5%;
(will be 14px on a 16px base)font-size: 87.5%;
(will be 14px on a 16px base)font-size: 81.25%;
(will be 13px on a 16px base)An alternate solution would be to make this an SCSS choice
Like exposing a setting in the SCSS variables that allows for a 16px base set in the component or supplying your own OR disabling the font-sizes in the component CSS to make it scale with your Framework of choice.
Reproduction Link
https://jsfiddle.net/bvt7hpru/
Steps to reproduce
Look at the multiselect element added inside the tag. It does not scale with the font-size set inside
Expected behaviour
https://jsfiddle.net/0faynh25/
The multiselect element scales with the set font-size
Actual behaviour
The text size does not scale with the font-size set inside
The text was updated successfully, but these errors were encountered: