Adding footer to Vuetify's list/menu/combobox - html

Question

I am trying to insert footer to the Vuetify's list or menu or combobox. They all are pretty same. I tried every possibe css solution I could without solution.
This is what I want but I want the bottom button to be statically visible at the bottom even if scrolling:
Regular fixed css solution do not work no matter on what element I do apply styles.
This is the combobox I am trying to implement it to:
<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>
Also tried using v-menu and 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
We need to add max-height and overflow: auto to the v-list element so that we can scroll the list, and not the whole menu.
Add "footer" to the bottom of the v-menu and it should work as expected.
And just wrap it inside the v-card for example so that menu is not transparent.
<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;
}
We can use #click.stop="" to prevent it from closing the menu.