[Vuejs]-Not able to change v-dialog style

by

4👍

✅

It’s always a good idea to use the docs for reference, if you haven’t done so already.

https://dev.vuetifyjs.com/en/components/dialogs#dialogs

You have to use the content-class property, instead of the normal class, if you want to attach a class to the v-dialog

Applies a custom class to the detached element. This is useful because
the content is moved to the beginning of the v-app component (unless
the attach prop is provided) and is not targettable by classes passed
directly on the component.

In this class you can then override the margin and max-height:

.custom-dialog.v-dialog{
    margin: 10px;
}

.custom-dialog.v-dialog:not(.v-dialog--fullscreen) {
  max-height: 50%;
}
👤Jesper

Leave a comment