[Bug Report] v-dialog overlay still placed in root when using attach

[Paulsky]

Versions and Environment

Vuetify: 1.5.0
Vue: 2.6.2
Browsers: Chrome 72.0.3626.81
OS: Windows 10

Steps to reproduce

Create a DOM element with a class/id. Create a VDialog and set the attach attribute with the selector. As described here at the 'attach' property: https://vuetifyjs.com/en/components/dialogs#attach

Expected Behavior

VDialog and the overlay have the target DOM element as parent. (this.$el.parentNode)

Actual Behavior

VDialog and overlay have the v-app DOM element as parent. (document.querySelector('[data-app]'))

Reproduction Link

https://codepen.io/Paulsky/pen/GzQZvX

[KaelWD]

Dialog is fine, it's just the overlay.

[Paulsky]

@KaelWD But shouldn't the dialog be in the center of the target DOM element? Instead of being in the center of the v-app?

[richdunajewski]

I agree, this seems broken with 1.5.6. The attach does not seem to work.

I expect the dialog and the overlay to be children of the selected element, so the dialog doesn't take over the entire app.

For background, I'm trying to overlay a section of the page with a "Loading..." modal similar to the example provided. I have a tabbed interface and I want the rest of the tabs to remain functional while the current tab is busy loading something. Right now, the entire app is overlaid, blocking the tabs from being usable.

[Olindholm]

Noticed this as well.

Any updates on when this will be fixed?

[Euthymos]

Hey there, I agree. IMO, this makes 'attach' quite useless. Any updates on this issue?

[jtomeck]

I ran into this with the overlay of a v-bottom-sheet using v-model to activate it.

It's kind of a backwards workaround, but I got around the issue by creating a separate v-overlay with the absolute prop inside my v-navigation-drawer, as well as using hide-overlay on the bottom-sheet itself. I then added v-if="yourModel" to the overlay to activate it at the same time as the bottom sheet. I hope this helps with the v-dialog issue as well.

https://codepen.io/jradicus/pen/yLewOOm

That said, I do still feel that this is a bug and the workaround should not be necessary.

[iaverdieck]

You can also set the position attribute of the dialog on your own. This will do it:
.v-dialog__content { position: absolute; }

[c-harding]

You can also set the position attribute of the dialog on your own. This will do it:
.v-dialog__content { position: absolute; }

It would be good if we could directly provide our own class to the div.v-dialog__content (e.g. with an container-class= attribute), as it feels rather like exploiting an implementation detail to style .v-dialog__content (which is undocumented) directly.

[hpo14]

You can also set the position attribute of the dialog on your own. This will do it:
.v-dialog__content { position: absolute; }

i ran into the same issue too.

With the following code, the dialog can correctly show in the child component

<template>
...
<v-dialog :attach="true">...</v-dialog>
..
</template>
<style scoped>
.v-dialog__content { position: absolute; }
</style>

[nyszilard]

Are there any news? It still doesn't work for me.

I ran into this with the overlay of a v-bottom-sheet using v-model to activate it.

It's kind of a backwards workaround, but I got around the issue by creating a separate v-overlay with the absolute prop inside my v-navigation-drawer, as well as using hide-overlay on the bottom-sheet itself. I then added v-if="yourModel" to the overlay to activate it at the same time as the bottom sheet. I hope this helps with the v-dialog issue as well.

https://codepen.io/jradicus/pen/yLewOOm

That said, I do still feel that this is a bug and the workaround should not be necessary.

@jtomeck
I've tried your solution with other components, but it doesn't seem to work with them:
https://codepen.io/szili303/pen/ZEpwJPb