summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/SelectBox.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/SelectBox.vue')
-rw-r--r--webapp/src/components/SelectBox.vue29
1 files changed, 17 insertions, 12 deletions
diff --git a/webapp/src/components/SelectBox.vue b/webapp/src/components/SelectBox.vue
index 98a207c..900b604 100644
--- a/webapp/src/components/SelectBox.vue
+++ b/webapp/src/components/SelectBox.vue
@@ -20,18 +20,22 @@
:class="labelClasses"
>{{ label }}</label>
<div class="select-input-chips">
- <v-chip
- class="item-chip"
- :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }"
- v-for="(item, index) in firstValueItems"
- :key="item[idKey]"
- small
- label
- close
- @input="removeItem(index)"
- >
- <div class="select-input-chip-text">{{ item.name || item.id }}</div>
- </v-chip>
+ <v-tooltip v-for="(item, index) in firstValueItems" :key="item[idKey]" top open-delay="800">
+ <template #activator="{ on }">
+ <v-chip
+ v-on="on"
+ class="item-chip"
+ :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }"
+ small
+ label
+ close
+ @input="removeItem(index)"
+ >
+ <div class="select-input-chip-text">{{ item.name || item.id }}</div>
+ </v-chip>
+ </template>
+ <span>{{ item.name || item.id }}</span>
+ </v-tooltip>
<span v-if="value.length > maxShow" class="text--secondary and-more" :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }">
+ {{ value.length - maxShow }} {{ $t('more') }}
</span>
@@ -192,6 +196,7 @@ export default {
display: flex;
flex-wrap: wrap;
flex: 1;
+ width: 0;
}
.select-input-chip-text {