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.

Sign up for GitHub

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

Jump to bottom

[Bug Report][3.1.6] Menu wrongly positioned in dialog after scrolling (only when first open) #16770

Closed
JosuaMeier opened this issue Feb 24, 2023 · 13 comments
Closed

[Bug Report][3.1.6] Menu wrongly positioned in dialog after scrolling (only when first open) #16770

JosuaMeier opened this issue Feb 24, 2023 · 13 comments
Assignees
@KaelWD
Labels
C: VOverlay VOverlay P: high The issue is of high importance T: bug Functionality that does not work as intended/expected
Milestone
v3.2.x

Comments

@JosuaMeier
Copy link

Environment

Vuetify Version: 3.1.6
Last working version: 3.1.2
Vue Version: 3.2.47
Browsers: Chrome 110.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

  • Open reproduction link
  • Scroll down a bit
  • Open dialog via button
  • Open the select menu

Expected Behavior

Menu should be directly under the select input. On the second attempt, the menu is correctly positioned.

Actual Behavior

Menu is not visible because its not directly under the menu.

Reproduction Link

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

Other comments

Calculation of the top attribute is not correct.
@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected C: VOverlay VOverlay and removed S: triage labels Feb 24, 2023
@KaelWD KaelWD self-assigned this Feb 24, 2023
@KaelWD KaelWD added this to the v3.x.x milestone Feb 24, 2023
@benoitkugler

This comment was marked as outdated.

Sign in to view
This was referenced Mar 7, 2023
Closed
Closed
@qxygene

This comment was marked as off-topic.

Sign in to view
@KaelWD KaelWD mentioned this issue Mar 12, 2023
Closed
@Chloe-Bang

This comment was marked as off-topic.

Sign in to view
This was referenced Mar 21, 2023
Closed
Closed
Closed
Closed
@KaelWD KaelWD pinned this issue Mar 22, 2023
@KaelWD KaelWD added the P: high The issue is of high importance label Mar 22, 2023
@KaelWD KaelWD modified the milestones: v3.x.x, v3.1.x Mar 22, 2023
@naranjamecanica
Copy link

Maybe of help: when I scroll the page menu suddenly appears.

@qxygene
Copy link

qxygene commented Mar 22, 2023

issue with scroll-strategy 'block' is problem.

@avarixe
Copy link
Contributor

avarixe commented Mar 23, 2023

My solution to this was to set overflow: hidden to <html> when the dialog is opened. That way, it still acts similarly enough to scroll-strategy: block:

const dialog = ref(false)
watchEffect(() => {
  document.documentElement.style.overflow = dialog.value ? 'hidden' : null
})

....
<v-dialog v-model="dialog">

@KaelWD KaelWD mentioned this issue Apr 5, 2023
Closed
@johnleider johnleider modified the milestones: v3.1.x, v3.2.0 (Orion) Apr 5, 2023
@joel-wenzel
Copy link
Contributor

@KaelWD Did you already have an idea about how you wanted to fix this one?
The issue seems to be in updateLocation of connected location strategy:

contentBox.y += parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-y') || 0);

contentBox.y is negative and so is v-body-scroll. So its actually doubling the offset vs correcting it back to 0. Just changing to -= fixes the problem

@baxeico
Copy link

baxeico commented Apr 13, 2023

A simple workaround to this issue is adding scroll-strategy="none" to v-dialog.

<v-dialog
    v-model="dialog"
    scroll-strategy="none"
>

This has the drawback that the underlying page is scrollable when the dialog is open. You'll see the content scrolling under the dialog and the overlay.

@qxygene
Copy link

qxygene commented Apr 15, 2023

A simple workaround to this issue is adding scroll-strategy="none" to v-dialog.

<v-dialog
    v-model="dialog"
    scroll-strategy="none"
>

This has the drawback that the underlying page is scrollable when the dialog is open. You'll see the content scrolling under the dialog and the overlay.

Yes this works, but when you go to xs with inner scrollbar(overflow-y-auto) that will give you 2 scrollbars side by side. Needs a proper fix.

@KaelWD KaelWD removed this from the v3.2.0 (Orion) milestone Apr 26, 2023
@KaelWD KaelWD added this to the v3.2.x milestone Apr 26, 2023
@WhiteSage

This comment was marked as off-topic.

Sign in to view
@KaelWD KaelWD closed this as completed in b7e3da6 May 2, 2023
@KaelWD KaelWD mentioned this issue May 4, 2023
Closed
@gdgcentrica
Copy link

This problem is not resolved in v3.2.2

@KaelWD
Copy link
Member

KaelWD commented May 5, 2023

Correct

@JosuaMeier
Copy link
Author

@gdgcentrica Should be resolved in 3.2.3.

@KaelWD KaelWD unpinned this issue Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@KaelWD KaelWD

Labels
C: VOverlay VOverlay P: high The issue is of high importance T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v3.2.x
Development

No branches or pull requests