Skip to content
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

[Bug Report][3.0.0-beta.15] VSelect height changes between empty and non-empty states when using chips #15980

Closed
aentwist opened this issue Oct 26, 2022 · 0 comments
Assignees
Labels
C: VSelect VSelect T: bug Functionality that does not work as intended/expected

Comments

@aentwist
Copy link

aentwist commented Oct 26, 2022

Environment

Vuetify Version: 3.0.0-beta.15
Vue Version: 3.2.41
Browsers: Firefox 105.0
OS: Ubuntu undefined

Steps to reproduce

  1. use VSelect
  2. use chips

Expected Behavior

no height change

Actual Behavior

height change

Reproduction Link

https://codepen.io/aentwist/pen/xxzbqxz

Other comments

I was able to fix this by letting flexbox do the work instead of calculating dimensions,

.v-select .v-field__input {
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

The chips are off-center too, due to this. Maybe the alignment should be redone.

.v-select--chips .v-select__selection {
  margin-top: 2px;
}
kelliedlynch added a commit to kelliedlynch/vuetify that referenced this issue Nov 11, 2022
Fields were growing when chips were added, because chips are 26px. Adjusted margins to compensate

fix vuetifyjs#15980
kelliedlynch added a commit to kelliedlynch/vuetify that referenced this issue Nov 19, 2022
Standardized the sizing and spacing of VInput-VField descendants to fix multiple bugs relating to
field resizing and text alignment. All field densities are now identical sizes across all variants.
This required changing the size of VChip elements inside a VField.

fix vuetifyjs#15980, fix vuetifyjs#16048, fix vuetifyjs#15948
kelliedlynch added a commit to kelliedlynch/vuetify that referenced this issue Nov 20, 2022
Standardized the sizing and spacing of VInput-VField descendants to fix multiple bugs relating to
field resizing and text alignment. All field densities are now identical sizes across all variants.
This required changing the size of VChip elements inside a VField.

fix vuetifyjs#15980, fix vuetifyjs#16048, fix vuetifyjs#15948
@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VSelect VSelect and removed S: triage labels Feb 2, 2023
@KaelWD KaelWD added this to the v3.3.0 (Icarus) milestone May 19, 2023
KaelWD added a commit that referenced this issue May 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VSelect VSelect T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants