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.0] VSelect menu shifted few pixels to the right #19732
Comments
This is happening because of edge detection and I don't think it's a bug. @KaelWD thoughts? |
Respectfully disagree. An unexpected behavior caused by something outside my control that gives a visual look not in line with the quality of the framework for me is a bug. Anyway, changing the DIVs with VContainers changed nothing. Thanks for looking! |
I'm not saying your issue doesn't have merit, just that it's not a bug. If it's not something that can be disabled maybe we add an option to do just that. |
locationStrategy has a hardcoded viewportMargin as 12px, seems to deliberately keep Overlay minimum 12px away from edge by default. There must be a good reason behind it. If parent div has a margin over 12px, it's working as expected demo |
Yes, putting the margin makes the dropdown stay where it should stay. Well, the overall effect is not nice as before (the selector filling the upper side of the sidebar) but acceptable. |
I think that the user should be able to opt out of this functionality. Surely it can't be too difficult to allow disabling. |
@KaelWD What was the reason behind
|
<template>
<v-app>
<v-navigation-drawer>
<v-select />
</v-navigation-drawer>
<v-container>
<div style="height: 1000px" />
<v-btn>
<v-menu activator="parent" location="end">
<v-list>
<v-list-item v-for="i in 100">Item</v-list-item>
</v-list>
</v-menu>
</v-btn>
<div style="height: 3000px" />
</v-container>
</v-app>
</template> Had a chat with John about this on monday, I have an idea for how to fix it. |
Environment
Vuetify Version: 3.6.0
Vue Version: 3.4.26
Browsers: Chrome 124.0.0.0
OS: Windows 10
Steps to reproduce
Open the dropdown menu.
Notice the menu is shifted to the right by 5-10 pixels.
Now remove the width style on the container div and the menu returns to normal position.
Expected Behavior
The menu be exactly below the selector.
Actual Behavior
It is shifted to the right if the container specifies a width.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
The two
The text was updated successfully, but these errors were encountered: