Vuetify: custom footer for Autocomplete component

user_6023926 0
Viewed 1268

I need to add some bottom-fixed element to a v-autocomplete component's list using Vuetify, like this:

lower content

I've tried using the append-item slot and applying position: sticky to it, so that it sticks to the bottom while the user scrolls the autocomplete list. This, however, won't work for IE11 (which I need to):

https://caniuse.com/#feat=css-sticky

I won't be able to add any polyfill for this to my project, so I tried finding another alternative. So far, I've used the v-menu component to attach both the autocommplete and the menu to the same div:

<div class="text-center">
    <v-menu content-class="menu" :attach="'.text-center'">
        <template v-slot:activator="{ on }">
            <v-autocomplete
                :attach="'.text-center'"
                class="autocomplete"
                :items="['something', 'something2']"
                color="primary"
                v-on="on"
                dark
            >
                Dropdown
            </v-autocomplete>
        </template>
        <div class="lower">
            Lower content
        </div>
    </v-menu>
</div>

https://codepen.io/codepenas/pen/YzXpMYY

It seems to work fine when you first focus on the autocomplete component. However, after clicking on it again, the menu holding the lower content gets deactivated. Moreover, when clicking on the rightest part of the autocomplete, only the list holding the autocomplete's items will be shown.

I need the lower content to toggle when the Autocomplete's list does so, or any other alternative for adding this fixed bottom part.

vuetify.js vue.js css-position sticky css
2 Answers

You can use the item slot, looks ugly but does work, even on IE11:

<v-autocomplete 
  :items="[{ value: 'something' }, { value: 'something2' }, 'Lower content']"
>
  <template v-slot:item="data">
    <template v-if="typeof data.item === 'object'">
      <v-list-item-content v-text="data.item.value"></v-list-item-content>
    </template>
    <template v-else>
      <v-list-item-content v-text="data.item" class="red"></v-list-item-content>
    </template>
  </template>
</v-autocomplete>
user_128615740

There is a solution:

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-menu content-class="menu" :attach="'.text-center'">
          <template v-slot:activator="{ on }">
            <v-autocomplete
              :attach="'.text-center'"
              class="autocomplete"
              :items="['something', 'something2']"
              color="primary"
              v-on="on"
              dark
            >
              <v-list-item
                slot="append-item"
                class="grey--text">
                {{ items.length }} elements
              </v-list-item>
            </v-autocomplete>
          </template>
      </v-menu>
    </div>
  </v-app>
</div>
user_10983030
Related