Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.6.8] v-speed-dial overlay positioned incorrectly when there is an open navigation drawer #19962

Open
basuneko opened this issue Jun 7, 2024 · 0 comments

Comments

@basuneko
Copy link

basuneko commented Jun 7, 2024

Environment

Vuetify Version: 3.6.8
Vue Version: 3.4.27
Browsers: Chrome 125.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Using the following template

<v-navigation-drawer :model-value="false" permanent />
<v-speed-dial location="bottom end">
  <template #activator="{ props }">
    <v-fab v-bind="props" app size="large" icon="$vuetify" />
  </template>

  <v-btn key="1" icon="$success"></v-btn>
  <v-btn key="2" icon="$info"></v-btn>
</v-speed-dial>
  1. Observe the FAB button in the bottom right corner of the screen
  2. Click on the FAB
  3. Observe that the speed-dial's overlay is displayed above the FAB
  4. Change the navigation drawer's model-value to true
  5. Click on the FAB again

Expected Behavior

The speed dial's overlay should be displayed in the same place above the FAB

Actual Behavior

The speed dial's overlay now appears on the left side of the screen along the navigation drawer's outer edge

Screenshot 2024-06-07 at 12 41 03

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

I'm re-integrating v-speed-dial into our project after the vue3 migration and have run into a bit of challenge. I've managed to work around it by putting the speed dial inside of the FAB and set activator="parent"
https://play.vuetifyjs.com/#eNqNUstOwzAQ/JUlQgIkQsTjVKUV8A2IC+XgOpvIqmNbaydVqfrvrJ2mDSCkXqLMema8652PXeZJFi/O3fUdZrOsDNg6LQIulgag7HPhXPpNoBXKHFDCRvSqEUFZk1ckNkgwa22FOu+F7nC+zJiwErTMQFptiQsrrueVoDWa/J7rBdsdDd9fg4FnqZVcH7Uwh4vRZfFmm0YjDLgsIn+q7/NarIA7Bq++4vVaUIN8i5LWMLzkGYOqt+w0apLKO8Qqr5TQpzL8HiVQx1ZTgrYyzR7HsiHYFtBUPylCBtWLkEZ3gtCE6fmki9THisdf45a58WnGpn0nJXrPTZdF4vwve5jIlKntOZrHiWYjyCjTnCN7msiQyMb1/BXFyul1T9HhMq9qDBajY7IiGDJXFpMsMvSSlAvgMXRDJFXrLAXYAWENe6iJN3DFK76Kh9yaD4ekcIaYch03eBN9Byf2yPa3ptM6fT6/AYU38Hk=


As a side-note, I'm a little confused by the location attribute.
For the speed dial specifically, the bottom/top part seems to change the orientation of the speed dial's individual items in the overlay, but doesn't move the actual overlay. The start/bottom, on the other hand moves the whole overlay left to right. Hopefully this is something that can be clarified in the docs 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant