Why do hidden elements change the size of vuetify select? (conditional rendering)

Question

I have a vuetify select where I want to restrict the text when too many elements are selected.

So I used conditional rendering to just display what I want:

<v-col cols="auto">
  <v-select label="Select" :items="items" hide-details v-model="selectedItems" multiple>
    <template v-slot:selection="{ index, item }">
      <div v-if="allSelected">
        <v-chip v-if="index == 0">All selected</v-chip>
      </div>
      <div v-else-if="selectedItems.length > 1">
        <v-chip v-if="index == 0">{{selectedItems.length}} selected</v-chip>
      </div>
      <div v-else>
        <v-chip v-if="index == 0">One selected</v-chip>
      </div>
    </template>
  </v-select>
</v-col>

As you can see, there are just 3 branches (all, some, one), each displays only one v-chip. But depending on the number of items selected, the select needs more or less space.

When changing cols to a specific number, the height increases when there isn't enough space.

Playground

Here is the playground where you can see that the select changes the size depending on the number of elements.

Moritz Ringler · Accepted Answer · 2025-01-28 11:09:34Z

1

The divs for each item are still created, just with width/height 0.

The parent .v-field__input defines column-gap: 2px;, meaning that each of those 0px divs will be separated by 2px, which is why the input grows when you add elements (by 2px for each element). Similarly, there is a margin-inline-end: 2px; defined on the divs.

Just override those rule to stop the select from growing with the number of selected items (assuming a custom my-select class set on the v-select):

.my-select .v-field__input {
  column-gap: unset;
}
.my-select.v-select .v-field--dirty .v-select__selection {
  margin-inline-end: unset;
}

Have a look at the playground.

answered Jan 28 at 11:09

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why do hidden elements change the size of vuetify select? (conditional rendering)

Playground

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Playground

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related