Popover in scrollable container #7953
Replies: 1 comment 10 replies
-
|
Does your popover have an underlay? You could use that to block the scrolling. Otherwise, maybe a running example in codesandbox or stackblitz could help, I'm not sure how the Popover is inside the ScrollableContainer, they are portalled out to be under the body. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for putting that together. We typically use |
Beta Was this translation helpful? Give feedback.
-
|
Yes we have it working by removing the So you put |
Beta Was this translation helpful? Give feedback.
-
|
Typically we apply it on the RAC Popover, though I just found this, where apparently we do deal with an incoming zIndex from a default style somewhere |
Beta Was this translation helpful? Give feedback.
-
|
So for example, if we had two fixed elements on a screen, like a SideNav and want our overlay to sit on top of it. It seems like we would have to add I am pretty new to |
Beta Was this translation helpful? Give feedback.
-
|
I am still struggling with this, and the docs are not proving to really help figure out how to solve this. It seems like we have to choose between using a Removing the I am trying to avoid telling all of our users that they are unable to use z-index in their apps. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
When using the
Popoverinside of a scrollable container, I am curious what options are available with the props to prevent the container from allowing scroll to occur.As of today, the
overflow: hiddenis set on thehtmlelement, which works perfectly if thePopoveris on the page, but in my scenario, we are placing the Popover inside of a scrollable container within the page. This results in the container still being scrollable when thePopoveris open, causing the positioning to break if the user scrolls. I am having trouble understanding which props might help address this.Here is a very basic example. My intention is that overflow: hidden is set on the
ScrollableContaineras opposed tohtmlin this case.Beta Was this translation helpful? Give feedback.
All reactions