Vuetify: [Bug Report] Dialog/Menu/Tooltip output an extra element and break layout

[augustoborn]

Versions and Environment

Vuetify: 1.5.9
Vue: 2.6.10
Browsers: Chrome 73.0.3683.103
OS: Linux x86_64

Steps to reproduce

Add a dialog inside a nav drawer, using a v-list-tile in the activator slot of the dialog.

Expected Behavior

The dialog activator should have the exact spacing as the other drawer items.

Actual Behavior

The dialog activator has extra spacing below it.

Reproduction Link

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

Other comments

Poking around the inspector, it looks like the problem stems from the v-dialog__container div right under the v-list-tile activator. Setting its style to display: none fixes the issue.

[blalan05]

Possible solution: There is an "extra" div added after the first v-list-tile with the class of "v-dialog__container" and the inline style of display: inline-block; changing it to display: none fixes the styling.

[usb248]

Any fix ?

[augustoborn]

Any fix ?

My workaround was using this in my app's main CSS file:

.v-dialog__container {
display: none !important;
}

[ipluser]

how to fix it?

[matthewma7]

The question here is why it needs to be inline-block? https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDialog/VDialog.js#L331

[usb248]

Any fix ?

My workaround was using this in my app's main CSS file:

.v-dialog__container {
display: none !important;
}

@augustoborn very dirty ...

[gorsat]

Same problem in v-menu with the activator slot. The same dirty fix works:
.v-menu--inline {
display: none !important;
}

1. Is there a real fix coming?
2. Should I open a different bug for this one?

[jessielaf]

Is there a fix coming this or is this intended behavior?

[johnleider]

I'm working on a fix for this right now. In the meantime, here is a workaround: https://codepen.io/johnjleider/pen/oNvpXrv

[xyannik]

Hi, I posted this issue which was marked as duplicate of 6951. But I didn't get a real response on my question: Is it expected behaviour, that in 2.0 dialogs/menus/tooltips in the HTML get added as a sibling of the activator? In 1.5 they got added as child-elements instead of siblings. Since I often use them in Grid-/Flex-Layouts, this has caused a couple of render issues. I'd like to know if this will be reverted in the next release, before I change all my related CSS (either way is fine, I just don't want to change all my CSS, only to have to change it back in the next release). Thanks

[KaelWD]

Um yeah that doesn't really fix this @johnleider, the elements are still visible so throw off the layout in a flex element.