Vuetify: [Bug Report] detachable positioning issues with wrapped content

[andrewtoups]

Environment

Vuetify Version: 2.1.10
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.120
OS: Windows 10

Steps to reproduce

1. Render the data-table inside a containing element with the css position property set to relative.
2. Place additional page content outside of the containing element and before the component in the document flow.
3. Click the "rows per page" dropdown.
4. The position of the dropdown will be misaligned.

Expected Behavior

The calculated position of the dropdown should always be set relative to the location of the component on the page.

Actual Behavior

The calculated position of the dropdown is offset by the same height as all content above the component.

Reproduction Link

https://codepen.io/andrewtoups/pen/WNNmxja

Other comments

While this is somewhat of an edge case, position: relative is a relatively ubiquitous property on container elements used in a variety of web layouts and should be accounted for. It likely isn't an issue in pure vuetify layouts but one of the appeals of this framework is the ability to pick and choose components and mix them with your existing work.

In my case I'm using this layout as a widget that can be inserted on any website and it really needs to play nice with common css layout strategies. Even if I had direct control over the rest of the document there are still cases where you would need to have a vuetify data-table inside a container with position: relative set.

[johnleider]

I'm not sure if this can be solved. Using margin around the surrounding v-app container is what causes this.

[andrewtoups]

Correct me if I'm wrong but as far as I can see there is no margin surrounding the v-app container itself in the linked codepen. While I am adding margin to the header element, that is only to increase its height to make the issue more obvious. See that there is no margin added directly to the v-app element or any of its parents in the css I used to reproduce:

header {
  margin: 75px auto;
  text-align: center;
}

.content-container {
  position: relative;
}

(v-app is contained in a sibling div after the header element)

In fact, here is a codepen where instead of margin the header's height is just set by a very large font size. The issue still occurs:
https://codepen.io/andrewtoups/pen/BayxzLM

I don't believe having sibling elements to a v-app container is an unrealistic use case.

[nekosaur]

This is not specific to v-data-table but an issue with v-select and all other components that detach elements.

[jbgury]

I described other cases in this codepen https://codepen.io/jbgury/pen/mdeGRxP which has the issue. I tried to use the "attach" attribute but without any success.
Detected the issue on : v-tooltip, v-menu (and indirect use of v-menu : v-combobox, v-select)

[Tofandel]

This is the same issue as #7703

[KaelWD]

Duplicate of #7703