Добавление нижнего колонтитула в список / меню / комбинированный список Vuetify

Question

Я пытаюсь вставить нижний колонтитул в список или меню Vuetify или комбинированный список. Они все одинаковы. Я испробовал все возможные варианты решения, которые только мог, без решения.

Это то, что я хочу, но я хочу, чтобы нижняя кнопка была статически видимой внизу, даже если прокрутка:

Обычные фиксированные css-решения не работают независимо от того, к какому элементу я применяю стили.

Это поле со списком, я пытаюсь его реализовать:

<v-combobox
    style="min-width: 260px;"
    dense
    :value="item.description"
    :items="products"
    item-text="name"
    item-value="id"
    :error-messages="item.description_error"
    :filter="filter_products"
    @input="product_selected"
    ref="description">
    <template
        slot="item"
        slot-scope="{ index, item, parent }">
        <v-list-tile-content v-if="!item.footer">{{ item.name }}</v-list-tile-content>
        <v-btn v-else flat dark small style="padding-left:0!important;margin-left:0!important;display:table-row;width:100%"
           color="primary"
           depressed
           :ripple="false"
           @click.stop="add_new_product"><v-icon left>add_box</v-icon>{{ item.footer }}</v-btn>
    </template>
</v-combobox>

Также пробовал использовать v-menu и v-list

<v-menu max-height="250px">
    <v-text-field label="Hello" slot="activator"></v-text-field>
    <v-list>
        <v-list-tile v-for="item in 10">hello</v-list-tile>
    </v-list>
    <p style="position: fixed; bottom: 0;">IUWHEGIuiHWEGIUHGIWUEHGIUWHEGIUHWEIUG</p>
</v-menu>

Answer 1

Codepen

Нам нужно добавить max-height и overflow: auto к элементу v-list, чтобы мы могли прокручивать список, а не все меню.
Добавьте «нижний колонтитул» внизу v-menu, и он должен работать как положено.
И просто оберните его, например, в v-card, чтобы меню не было прозрачным.

<v-menu v-model="menu" offset-y>
  <v-btn slot="activator">Menu</v-btn>
  <v-card>
    <v-list class="custom-list">
      <v-list-tile v-for="item in items"></v-list-tile>
    </v-list>
    <v-divider></v-divider>
    <div class="pa-1" @click.stop="">
      <v-btn flat dark small color="primary" depressed :ripple="false">
        <v-icon left>add_box</v-icon>
          footer button
      </v-btn>
    </div>
  </v-card>
</v-menu>

CSS

.custom-list {
  max-height:200px; 
  overflow: auto;
} 

Мы можем использовать @click.stop="" для предотвращения закрытия меню.