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] Custom style in main div
See original GitHub issue🐛 Bug report
Popover component has a problem when any component uses a different z-index
e. g.: this SearchBar component (“O que vc procura?”) uses z-index 1 and select component (“UF”) uses popover with portal tag
🧐 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:10 (7 by maintainers)
Top Results From Across the Web
Apply CSS to popover in Bootstrap - Stack Overflow
You can override Bootstrap popover styles. ... And replace --main-bg-color , --border-color , and --font-color with yours.
Read more >Building a Popover with only CSS - Kallmanation
Popovers were once firmly in the domain of JavaScript. Today let's examine one of our non-JS options to build them.
Read more >How To Customize Bootstrap 3 Popovers Individually Using ...
I needed to find a way to use Bootstrap popovers as a navigation option as well as be able to style them individually...
Read more >Popovers - Bootstrap
When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom container so that...
Read more >Reusable Popovers to Add a Little Pop | CSS-Tricks
Step 1: Create the BasePopover component · Popover content: This is the element that will be responsible for rendering the content within the ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
codesandbox: https://codesandbox.io/s/popover-content-props-kd4eu
In the code you can see that the popover content has a parent chakra.div that is not possible to specify props / style to, I had to manually patch locally chakra-ui to fix this issue in one of my projects
Hi @max10rogerio, you can use
rootPropsto pass props to the popover content’s container.