PopoverContent on Drawer is displayed under DrawerOverlays #5974
Unanswered
takeshiigarashi
asked this question in
Q&A
Replies: 2 comments 1 reply
-
any solution? |
Beta Was this translation helpful? Give feedback.
1 reply
-
I tried to debug this issue with my friend @Idaslon But we cannot figure this issue, we prefered to create a drawer custom component:
clean solution for us. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
The problem is that PopoverContent on Drawer is displayed under DrawerOverlays.
Popover is placed on Drawer.
Since the width of Popover content must be wider than Drawer's,
PopoverContent is wrapped with Portal component.
https://codesandbox.io/s/popover-on-drawer-es8k3r?file=/src/index.js
https://es8k3r.csb.app/
How to fix?
z-index of PopoverContent does not work. z-index is not rendering to dom component.
Wrap PopoverContent by Box component having a specific css class name,
and write css file with "the-class-name > div { z-index: 1500; }".
The above work correctly. Popover has displayed over DrawerOverlays.
But z-index manipulation does not sound good.
Is there any good solution?
Beta Was this translation helpful? Give feedback.
All reactions