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
QInput label always floats on required number input #13868
Comments
|
It's because of this: .q-field__input[type=number]:invalid+.q-field__label, .q-field__native[type=number]:invalid+.q-field__label {
transform: translateY(-40%) scale(0.75);
} Which is there because firefox shows the spinner arrows :( You can override that rule in your stylesheet I'll have to check if we can fix it for firefox with some specific targeting |
Yes, that is a viable workaround, but it would be nice if also the native validation could be used.
Thanks, that would be great. |
…ork#13868 - only float for number if value is valid number - always float for color and date related types
…ork#13868 - only float for number if value is valid number - always float for color and date related types
…ork#13868 - only float for number if value is valid number - always float for color and date related types
Fix will be available in Quasar v2.11.8 and v1.22.7 |
What happened?
When using QInput with
type="number"
andrequired
, the label is always floated, even when the input has no value.What did you expect to happen?
The label to look similar to other inputs without value.
Reproduction URL
https://codepen.io/logima/pen/bGvVWgM
How to reproduce?
Flavour
Vue CLI Plugin (vue-cli-plugin-quasar)
Areas
Components (quasar), Style & Identity (quasar)
Platforms/Browsers
Chrome
Quasar info output
No response
Relevant log output
No response
Additional context
#4371 might be where this issue started. Tehcnically this works correctly: empty required number input is invalid, so the label is floated. In this case though this behavior is unwanted, as it makes the input's initial state look different than other empty inputs. Removing the
required
-attribute fixes label position, but also removes native required-validation.I'm using Quasar 1.19.4, but the same applies to latest v2 (2.7.5).
v2 reproduction link: https://codepen.io/logima/pen/KKodqNw
The text was updated successfully, but these errors were encountered: