[Bug Report][3.6.0] VSelect menu shifted few pixels to the right

[crystalfp]

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

containers are part of the application.

[johnleider]

This is happening because of edge detection and I don't think it's a bug. @KaelWD thoughts?

[crystalfp]

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. The width cannot be removed because the selector is in a side panel of a flex container.

Thanks for looking! mario

[johnleider]

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.

[yuwu9145]

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

[crystalfp]

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. Will be nice if you would like to investigate if this margin is really necessary o if it is possible to switch off (maybe with an option). Anyway, thanks a lot for vuetify! With it my application has a very professional look.

[johnleider]

I think that the user should be able to opt out of this functionality. Surely it can't be too difficult to allow disabling.

[yuwu9145]

@KaelWD What was the reason behind https://github.com/vuetifyjs/vuetify/blob/767ecdcedd75a6d28379ee4058b8c3b70bb66feb/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L235

[KaelWD]

<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.

[Fengtao1314520]

I also found this issue, when v-select in v-navigation-drawer, was shifted to the right by 12 pixels, and using dev tools to found that .v-overlay-container .v-combobox__content , that left is 12 PX. i had to change global to modify this issue. but ti still modify other v-select too, please consider this scenario, it's very helpful for me.

and it's a demo LINK

[crystalfp]

Problem still in vuetify 3.7.1