CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Marc
Marc

Reputation: 14277

Why is my vuetify dialog hidden behind this evil overlay?

I have a vuetiful component which should just display a dialog. Unfortunately, an evil overlay has taken over the domverse. How do I overcome the forces of semi-transparent darkness?

Vue.component('step-form', {
    data: function() {
        return {
            dialog: false
        }
    },
    methods: {
        showDialog() {
            this.dialog=!this.dialog;
        }
    },
    template: `
    <v-dialog v-model="dialog" persistent max-width="600px">
        Help, I'm hidden behind this evil "overlay"!
    </v-dialog>
`
});

https://codepen.io/anon/pen/jJpWGx

Upvotes: 9

Views: 18462

Answers (2)

Traxo
Traxo

Reputation: 19002

It's not.

You simply don't have background color inside v-dialog. You can put v-card inside for example.
You just used persistent property which makes you unable to close it on-overlay-click, and have no other means to close it.
So dialog has z-index: 202, and overlay has 201 apparently, so dialog is above overlay,
but box-shadow makes it look like like it's floating behind it or something, but it's because it's transparent, and you just need to set background-color.

Upvotes: 13

dagalti
dagalti

Reputation: 1956

use hide-overlay

change to below code

<v-dialog hide-overlay
 v-model="dialog" persistent max-width="600px">
        Help, I'm hidden behind this evil "overlay"!
    </v-dialog>

Documentation : https://vuetifyjs.com/en/components/dialogs

Upvotes: 7

Related Questions