I've been struggling to add a footer to the Vuetify components like lists, menus, and comboboxes. Despite trying numerous CSS solutions, I haven't found one that works.
What I'm aiming for is to have a fixed bottom button visible at all times, even when scrolling:
https://i.sstatic.net/QtcEv.png
Traditional fixed CSS techniques haven't proven effective, regardless of the element I apply them to.
Here's an example of the combobox where I'm attempting to implement the footer:
<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>I've also experimented with 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>