Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[POPOVER] Z-index to main div popovoer

See original GitHub issue

🐛 Bug report

Popover component have a problem when any component use a different z-index

Search component (“O que vc procura?”) use z-index 1 and select component (“UF”) use popover with portal

🧐 Expected behavior

Popover box on top of search component

🧭 Possible Solution

Possibility pass css style to main div of popover

See z-index: 2;, I add manually in dom chrome

🌍 System information

Software	Version(s)
Chakra UI	^1.0.1
Browser	Chrome
Operating System	Ubuntu 20.04

📝 Additional information

Screenshots or code
Notes or link to ideas

Issue Analytics

State:
Created 3 years ago
Comments:7

Top GitHub Comments

3reactions

aysommercommented, Apr 19, 2021

My solution works for me with for MenuList, thanks:

1reaction

max10rogeriocommented, Feb 16, 2021

I think this problem is solved by adding more zindex before PopoverContent

Top Results From Across the Web

bootstrap popover not showing on top of all elements

While this sorts out the original z-index issue, the popover doesn't stick with the original trigger element once you start dragging things around...

CSS - z-index property (Layout third axis or Overlap order)

CSS in CSS. Syntax Usage: set the z-index on the outermost parent Why it does not work The z-index property applies only to...

Z-index · Bootstrap v5.2

We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.

Chi - Popover

Popovers provide a contextual space attached to an element in an upper z-index layer where you can include any kind of HTML code...

Popover z-index bug • REPL • Svelte

import Popover from 'svelte-easy-popover'. 3. import IoIosInformationCircleOutline from ... <div class="information" transition:fade={{ duration: 200 }}>.