Custom postion for v-dialog Vuetify

Question

I need to open a v-dialog of certain width and height on right bottom side of my page, but, I can't understand how to do. V-dialog always are centered on the page, I searched on official doc, tried use CSS, but wasn't able any ideas?

Answer 1

Note: Other provided solutions are not satisfying because they mess up transitions, or we can't use scoped-styles, or they suggest using !important etc.

Solution

Add arbitrary content-class class to your dialog:

<v-dialog content-class="my-custom-dialog">

Then we can use scoped styles:

<style scoped>
  >>> .my-custom-dialog {
    align-self: flex-end;
  }
</style>

Answer 2

This feature is being looked at but for now you can use edit the CSS class yourself. For instance, to get it to display in the bottom right use:

.v-dialog {
    position: absolute;
    bottom: 0;
    right: 0;
}