I am facing an issue with styling a Vuetify dialog dynamically. Despite trying computed style bindings, CSS variables, and direct input of styles, the default v-dialog stylings are not being overwritten. How can I achieve dynamic styling on a Vuetify component?
Here is the code for my dialog:
<template>
<v-dialog
v-model="dialog"
max-width="350px"
persistent
hide-overlay
style="{position: absolute; bottom: 0px;}"
>
<div class="arrow-up mb-n1 ml-1"></div>
<v-card>
<v-container>
<v-card-text>
<v-row>
<v-col
cols="12"
align="start"
>
<p class="text-subtitle-1">
Always best to start at the beginning, let's pull your products first.</p>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="mt-n8">
<v-btn
color="#68007d"
text
@click="goToImportMethod"
>
NEXT
</v-btn>
<v-btn
color="#616161"
text
@click="closeEverything"
>
CLOSE
</v-btn>
</v-card-actions>
</v-container>
</v-card>
</v-dialog>
</template>
I have attempted using a computed property like this:
<v-dialog
v-model="dialog"
max-width="350px"
persistent
hide-overlay
:style="myStyle"
>
With the following computation function:
computed: {
myStyle() {
return {
bottom: '0px',
left: '150px',
position: 'absolute'
}
}
},
I also tried incorporating variables within the class itself as shown below:
>>> .v-dialog {
box-shadow: none;
overflow: visible;
bottom: var(--bottom);
left: 150px;
position: absolute;
}
using a simple data property:
data () {
return {
dialog: true,
bottom: '0px',
}
},
However, only statically overwriting the class seems to provide any results:
>>> .v-dialog {
box-shadow: none;
overflow: visible;
bottom: 0px;
left: 150px;
position: absolute;
}