Drop-down menu positioning when user scrolls

[nathany]

The address auto-completion dropdown is floating when the user begins scrolling. I would expect it to stay attached to where it opened instead of having an absolute position that floats.

I was unable to try the demo to verify that this is happening there and not just in my particular inherited code base.

Updating to the latest Vue 2.6.11, Vuetify 2.2.12, and Vuetify Google Autocomplete 2.0.1 did not address the issue.

[nathany]

36 may be slightly related

[nathany]

This appear to only be an issue when the autocomplete field is inside a <v-dialog>.

[zkramer22]

Also experiencing this issue. The linked issue is unrelated. Also, this issue occurs no matter the placement of the <v-autocomplete> – or <v-combobox> or <v-select> for that matter.

[zkramer22]

@nathany my site's code included this body, html { overflow-x: hidden; }

and removing that CSS property fixed all of my floating menus.

to be clear, i mean that every one of my <v-autocomplete>, <v-select>, etc – anything that uses a listbox – when clicked, kept the scrollable list attached to the container, rather than appearing like an element with fixed position that follows the user's scroll. Huzzah

[jeanpaul1304]

Also experiencing this issue. It's related to the v-menu (autocomplete) property, that not is set in the v-menu of this components that implement it

[JaypegMI]

The problem is that the pac-container that houses the dropdown items is attached to the body tag and not the autocomplete container. So no amount of CSS will bind it to the container. The script should be fixed to support this so there's no need to hackathon it.