UDropdown is displaying underneath some page elements

RaulRohjans commented 2 weeks ago

Environment

Operating System: Arch Linux
Node Version: 2.9.6
Nuxt Version: 3.11.2
Nitro Version: 2.8.1
Package Manager: yarn@1.22.22
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

Additional context

No response

Logs

No response

KonradDRAST commented 1 week ago

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.

KonradDRAST commented 1 week ago

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.

RaulRohjans commented 1 week ago

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?

nuxt / ui