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

Answer 2

I added this style to my "validate" button and it worked:

.append {
  position: sticky;
  bottom: 0;
  background: white;
}


    <template #append-item>

      <div class="append">
        <v-btn color="primary">
          Validate
        </v-btn>
      </div>
    </template>