Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Popover: wrong position while scrolling inner element instead of <body> #14830

Closed
1 task
hojovi opened this issue Feb 14, 2019 · 5 comments
Closed
1 task

Popover: wrong position while scrolling inner element instead of <body> #14830

hojovi opened this issue Feb 14, 2019 · 5 comments
Assignees
@yesmeck

Comments

@hojovi
Copy link

hojovi commented Feb 14, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. set body style "overflow: hidden";
  2. add a
    element with "overflow: scroll" and "height:100%";
  3. add a
    element in 1st
    with sufficiently large height;
  4. add a "Popover" component in 2nd div;
  5. click the button in "Popover" and scroll page;

What is expected?

the popover should be around it's child element while scrolling

What is actually happening?

the popover isn't around it's child element

Environment Info
antd 3.13.2
React latest
System Windows 10
Browser Chrome / Version 71.0.3578.98
@afc163
Copy link
Member

afc163 commented Feb 14, 2019 •
edited

Duplicate of #3487 #3438

@afc163 afc163 marked this as a duplicate of #3487 Feb 14, 2019
@afc163 afc163 closed this as completed Feb 14, 2019
@AbdulRayhman
Copy link

modify .ant-popover{
z-index: 0;
}
hope this resolve your issue.

@hojovi hojovi mentioned this issue Feb 18, 2019
Closed
@shivakantshukla55
Copy link

shivakantshukla55 commented Feb 19, 2021 •
edited

Use <Select getPopupContainer={trigger => trigger.parentElement}> to render a component inside the scroll area. If you need to config this globally in your application, try <ConfigProvider getPopupContainer={trigger => trigger.parentElement}>

And make sure that parentElement is position: relative or position: absolute.
this will work for Popover too.

Reference:
https://ant.design/docs/react/faq
https://codesandbox.io/s/4j168r7jw0?file=/index.js

@katekostina
Copy link

<Popover getPopupContainer={trigger => trigger.parentElement}>
Worked for me.

@AhmedRazaTester
Copy link

<Popover getPopupContainer={trigger => trigger.parentElement}> Worked for me.

amazing

@AnnaRainier AnnaRainier mentioned this issue Aug 25, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yesmeck yesmeck

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@yesmeck @afc163 @hojovi @AbdulRayhman @shivakantshukla55 @katekostina @AhmedRazaTester