I have following code
<v-card-text
style="min-height: 700px"
class="px-6 py-4"
>
<v-row no-gutters>
<v-col>
<div
v-for="(log, i) in logs"
:key="i"
>
{{ log }}
</div>
</v-col>
<v-btn></v-btn>
</v-row>
</v-card-text>
I need to place a button at the bottom right corner of the above scrollable div. I managed to get following result
I cannot wrap it with a div tag since I’m using v-dialog scrollable prop which doesn’t allow to wrap v-card-text with other tags. You can find a demo here.
I think this can be achieved by using css position, maybe sticky or fixed, but I don’t quite know how to do it.
Note that I’m using Vuetify 2 but the demo was done in a Vuetify 3 playground.
So, how can I do it?
2
Are the buttons supposed to scroll away in the popup? Or should they always be visible?
If they are always supposed to be visible, you can add another button with an id or class then absolutely position it in the bottom-right. I’ve updated your demo so you can see how to add the positioning. If they are supposed to scroll out of view, then you will need to use relative positioning instead.
<v-btn class="chevron-down" color="primary" icon="mdi-chevron-down"></v-btn>
...
<style>
.chevron-down {
bottom: 50px;
position: absolute;
right: 25px;
}
</style>
2