mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

Maintain stable height when selected

Browse Source 
We need the selected-tag and input to have the same line height, and
same border widths so the height of the content (either a selected-tag
or the input) is stable. Otherwise the v-select will change height by a
few pixels when a value is selected vs empty.
This commit is contained in:
Steven Harman
2018-07-20 11:44:04 -04:00
parent faa548106f
commit 9a5d666bd1
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.vue
+8 -7
View File
@@ -67,7 +67,7 @@
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
display: flex; display: flex;
padding: 0; padding: 0 0 4px 0;
background: none; background: none;
border: 1px solid rgba(60, 60, 60, .26); border: 1px solid rgba(60, 60, 60, .26);
border-radius: 4px; border-radius: 4px;
@@ -86,7 +86,7 @@
flex-basis: 100%; flex-basis: 100%;
flex-grow: 1; flex-grow: 1;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 2px 4px; padding: 0 2px;
} }
.v-select .v-select__actions { .v-select .v-select__actions {
display: flex; display: flex;
@@ -146,10 +146,11 @@
.v-select .selected-tag { .v-select .selected-tag {
display: flex; display: flex;
align-items: center; align-items: center;
color: #333;
background-color: #f0f0f0; background-color: #f0f0f0;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
color: #333;
line-height: 1.42857143; /* Normalize line height */
margin: 4px 2px 0px 2px; margin: 4px 2px 0px 2px;
padding: 0 0.25em; padding: 0 0.25em;
} }
@@ -196,12 +197,11 @@
-moz-appearance: none; -moz-appearance: none;
line-height: 1.42857143; line-height: 1.42857143;
font-size: 1em; font-size: 1em;
height: auto;
display: inline-block; display: inline-block;
border: none; border: 1px solid transparent;
outline: none; outline: none;
margin: 0; margin: 4px 0 0 0;
padding: 0 .5em; padding: 0 0.5em;
max-width: 100%; max-width: 100%;
background: none; background: none;
box-shadow: none; box-shadow: none;
@@ -223,6 +223,7 @@
cursor: pointer; cursor: pointer;
} }
.v-select input[type="search"].hidden { .v-select input[type="search"].hidden {
border: none;
height: 0; height: 0;
padding: 0; padding: 0;
width: 0; width: 0;