How to make an append item always visible in v-select vuetify

Question

I have a vuetify v-select dropdown. Inside I made a slot #append-item in which I have a button "validate" I want the button to always be visible when I scroll inside the dropdown.

Answer 1

Wrap your button with a div having the append class name :

 <template #append-item>
              <div class="append">
                <v-btn color="primary">valider</v-btn>
              </div>
 </template>

that class should have the following css rules :

.append{
  position:sticky;
  bottom:8px;
  width:100%;
  display:flex;
  justify-content :center;
  background :white;
  
}

LIVE DEMO