search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.89k stars 1.19k forks source link

Dropdown/Calendar: Panels z-index issue with manually assigned container index. #4300

Open Magiczne opened 1 year ago

Magiczne commented 1 year ago

Describe the bug

Another follow up to the #3554, #3121, and #4093.

@tugcekucukoglu it is still a bug. It either needs a resolving or a workaround. Please don't close this ticket immediately.

Copied from #4093:

Currently dropdowns are using automatic z-index handling, which not always is good. There are many cases when dropdown appear in custom elements, or are related to custom elements which are not handled by ZIndexUtils.

This is why previously I've created feature request for adding auto-z-index and baseZIndex props for the dropdown - https://github.com/primefaces/primevue/issues/3121 - which was closed by previously mentioned fix.

Reproducer

https://codesandbox.io/p/sandbox/recursing-https-4mg3dp

PrimeVue version

3.32.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

  1. Go to the reproducer
  2. Open dropdown in the Header
  3. Observe panel content rendered above header - that is perfectly fine
  4. Open dropdown in the body content
  5. Scroll down
  6. Observe content floating above the header - that is invalid

And I see no options to properly configure that using ZIndex, as input dropdown panel does not have ability to manually assign z-index which was content of my previously reported bugs.

Expected behavior

No response

Daniel-WWU-IT commented 8 months ago

@tugcekucukoglu I want to second this issue, as we just ran into it, too: A dropdown's panel in a (dynamic) dialog doesn't get a correct z-index, thus appearing behind the dialog. Adding a custom z-index class to the panel element of the dropdown solves this, but this should either be fixed, or at least a baseZIndex property should be added to the panel.

Terrijoo commented 6 months ago

This seems to still exist on latest version as well. Using a DynamicDialog in my case and the dropdown panel gets rendered behind the dialog.

Magiczne commented 4 months ago

@tugcekucukoglu @mertsincan is there any change it will be fixed? for example in 4.0?