React-datepicker: the popper is going inside the popup.
I have some fields inside a popup where datepicker is used. but inside the popup the popper of the datepicker is going inside the scroll rather than showing above the popup. I'm working on a reactjs project. How can i acheive it ?
Expected behavior
the popper must be shown above the popup
Desktop (please complete the following information):
- OS: windows
- Browser: chrome,firefox
- Version: latest
athuldom
All 2 comments
I'm interested, I have kind of the same issue.
Tried
.react-datepicker-popper {
overflow: visible;
z-index: 2147483647;
}
But it doesnt work. I guess the next thing is to use portals but I have no idea how to display the component in the right position
EDIT: If you use the last version (>3.0.0) you can use the portalIdprop and it will create a portal if it is not defined, thus you can bypass parent's overflow
See https://reactdatepicker.com/#example-portal-by-id
MathisBicheyre
on 5 Aug 2020
How to use the portals for this issue? any idea? i have not used it before
athuldom
on 19 Nov 2020
Related issues
jbccollins
路
3Comments
jcabrerazuniga
路
3Comments
kkras3
路
3Comments
hoodsy
路
3Comments
ericreis
路
3Comments
Most helpful comment
I'm interested, I have kind of the same issue.
Tried
.react-datepicker-popper { overflow: visible; z-index: 2147483647; }But it doesnt work. I guess the next thing is to use portals but I have no idea how to display the component in the right position
EDIT: If you use the last version (>3.0.0) you can use the
portalIdprop and it will create a portal if it is not defined, thus you can bypass parent's overflowSee https://reactdatepicker.com/#example-portal-by-id