Skip to content

Commit

Permalink
fix(vselect): prevent chips from changing field size
Browse files Browse the repository at this point in the history
Fields were growing when chips were added, because chips are 26px. Adjusted margins to compensate

fix vuetifyjs#15980
  • Loading branch information
kelliedlynch committed Nov 11, 2022
1 parent e1f09d2 commit cddfa74
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 8 deletions.
8 changes: 2 additions & 6 deletions packages/vuetify/src/components/VSelect/VSelect.sass
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
@use '../../styles/tools'
@use './variables' as *

@at-root
@include tools.density('v-input', $select-chips-margin-bottom) using ($modifier)
--select-chips-margin-bottom: #{0px + math.div($modifier, 2)}

.v-select
.v-field
.v-text-field__prefix,
Expand Down Expand Up @@ -62,8 +58,8 @@

&--chips
.v-select__selection
margin-top: $select-chips-margin-top
margin-bottom: var(--select-chips-margin-bottom)
margin-top: -1px
margin-bottom: -1px

&:first-child
margin-inline-start: 0
Expand Down
2 changes: 0 additions & 2 deletions packages/vuetify/src/components/VSelect/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,3 @@ $select-content-elevation: 4 !default;
$select-line-height: 1.75 !default;
$select-transition: .2s settings.$standard-easing !default;
$select-chips-control-min-height: 64px !default;
$select-chips-margin-top: 2px !default;
$select-chips-margin-bottom: ('default': 0, 'comfortable': 1, 'compact': 2) !default;

0 comments on commit cddfa74

Please sign in to comment.