[Feature Request] Make dropdown position calculation compatible for embedded Vuetify apps

Problem to solve

If you have a Vuetify app that is embedded into a page where it is not taking up the full browser window, an app on a WordPress page for example, and you have a relative positioned element as its parent, dropdowns like VSelect will be offset.

Proposed solution

I tried digging into the source code, but could not really track down the logic, but the only way for me to get Vuetify’s dropdowns to work in an embedded app situation, I had to remove all position: relatives from parent nodes. Add position: relative to v-app didn’t work, so I’m guessing the calculation is based on the window, but somehow relative position parents alter the calculation.

I propose rewriting how the positioning calculation is performed and making sure v-app is the reference used for positioning.

[hicreate]

For me the solution I found that works is to use the attach prop without a value i.e.

<v-select :items="items" attach></v-select>

[stephane303]

Is there a workaround meanwhile ? I am also embedding a Vuetify application, and I am confronted with the same problem.