ui icon indicating copy to clipboard operation
ui copied to clipboard

UDropdown is displaying underneath some page elements

Open RaulRohjans opened this issue 1 year ago • 7 comments

Environment

  • Operating System: Arch Linux
  • Node Version: 2.9.6
  • Nuxt Version: 3.11.2
  • Nitro Version: 2.8.1
  • Package Manager: [email protected]
  • Builder: -
  • User Config: extends, modules, app, ui, imports, devtools
  • Runtime Modules: '@nuxt/ui', '@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'nuxt-icon', '@sidebase/nuxt-auth'
  • Build Modules: -

Version

@nuxt/ui": "^2.13.0

Reproduction

Description should be clear.

Description

I have a navbar with a UDropdown for some user options in my default layout. The issue is that certain elements will display over the dropdown, such as inputs and some UTable borders

image

Additional context

No response

Logs

No response

RaulRohjans avatar May 02 '24 20:05 RaulRohjans

Same here. It probably have something to do with "transform: translate()" on the dropdown container. There is class z-20 added on the same container, but the translation resets stacking context, and in the end, probably causes an issue.

KonradHEXANT avatar May 06 '24 09:05 KonradHEXANT

I was checking all elements and (in my case) the problem arose because of some relatively positioned elements down below. Once I added classes relative z-20 to my header problem was solved.

Probably not a bug then, but an issue with CSS stacking context in your project.

KonradHEXANT avatar May 06 '24 11:05 KonradHEXANT

Maybe this could be fixed by rendering the dropdown at the bottom of the DOM and then positioning it where it should be displayed, does the component provide a way of doing that?

RaulRohjans avatar May 06 '24 15:05 RaulRohjans

Also got this issue, and this also applies into the Select Menus, because the content is never teleported to the outer dom, unless you specify popper strategy to "fixed", but in this case the "w-full" will the content of the dropdown to fill the whole page, i believe with modifiers in place this could be done in a good way.

nikuscs avatar Jun 14 '24 11:06 nikuscs

Hello, I got this issue as well. I was expecting that strategy: "fixed" would have teleported the popover to the bottom of the body, but that is not happening, causing other issues as well. Any update?

adrianogiannacco avatar Jun 18 '24 10:06 adrianogiannacco

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] avatar Jul 25 '24 01:07 github-actions[bot]

any luck? a teleport attr looks good to me

Lionad-Morotar avatar Jul 30 '24 16:07 Lionad-Morotar