0👍
Following m4n0’s suggestion, found out any class that I use on v-dialog component was applying in the dialog inside v-application–wrap. But as you can see outside application–wrap, there is another v-dialog class is appearing. So currently I removed the scoped property from style, which is now giving me my desired output. Probably targeting the class should be a better option. I will try that out later.
I am not sure though if it is an intended behavior or I made a mistake somewhere.
3👍
There are two easy ways I know of to remove box-shadow from v-dialog (and v-menu).
1. Globally:
<style>
.v-dialog {
box-shadow: none;
}
</style>
2. Specific v-dialog (better way):
<v-dialog content-class="elevation-0">
...
</v-dialog>
Notice that it has to be content-class instead of just class.
And if you want to hide the overlay, too:
<v-dialog content-class="elevation-0" hide-overlay>
...
</v-dialog>
References:
v-dialog API, Vuetify Elevation helpers
0👍
From this code it’s visible that shadow is added on element with .v-dialog class, so you’re adding "no-shadow" style to the wrong element.
.v-dialog {
border-radius: 6px;
margin: 24px;
overflow-y: auto;
pointer-events: auto;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
width: 100%;
z-index: inherit;
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 9%), 0px 24px 38px 3px rgb(0 0 0 / 5%), 0px 9px 46px 8px rgb(0 0 0 / 3%);
You can add your class directly to <v-dialog> component, or use elevation-0 class.
EDIT:
If you want to remove dialog’s overlay, use hide-overlay prop