DatePicker calendar using appendTo prop is badly positioned if ancestor has padding #4818
Closed
1 of 2 tasks
Labels
Comments
dakahn
changed the title
|
We're going to use this issue to track the first problem and roll the portal problem into another issue 👍 |
2 tasks
|
The new issue title is inaccurate. The calender is scrolling correctly now that we've added the appendTo. However, it is not positioned correctly underneath the input element. |
|
@kglickman Thank you for trying to correct - Would you want to suggest a new subject, or directly edit it if you can? Thanks! |
kglickman
changed the title
asudoh
added a commit
to asudoh/carbon-components
that referenced
this issue
Dec 10, 2019
asudoh
added a commit
to asudoh/carbon-components
that referenced
this issue
Dec 10, 2019
This change inroduces a Flatpickr plugin that ensures that the calendar dropdown is put in the correct floating position even if the floating menu container is changed via `appendTo` and the floating menu container has significant offset from `<body>`. Fixes carbon-design-system#4818.
asudoh
added a commit
that referenced
this issue
Jan 10, 2020
This change inroduces a Flatpickr plugin that ensures that the calendar dropdown is put in the correct floating position even if the floating menu container is changed via `appendTo` and the floating menu container has significant offset from `<body>`. Fixes #4818.
joshblack
pushed a commit
to joshblack/carbon
that referenced
this issue
Jan 13, 2020
…#4846) This change inroduces a Flatpickr plugin that ensures that the calendar dropdown is put in the correct floating position even if the floating menu container is changed via `appendTo` and the floating menu container has significant offset from `<body>`. Fixes carbon-design-system#4818.
joshblack
pushed a commit
to joshblack/carbon
that referenced
this issue
Jan 14, 2020
…#4846) This change inroduces a Flatpickr plugin that ensures that the calendar dropdown is put in the correct floating position even if the floating menu container is changed via `appendTo` and the floating menu container has significant offset from `<body>`. Fixes carbon-design-system#4818.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What package(s) are you using?
carbon-componentscarbon-components-reactDetailed description
We had an issue where the calendar popup of the DatePicker did not scroll when the input box scrolled. This is fixed by supplying the appendTo prop and setting it's positioning of that appendTo element to relative.
However, if there is any padding or margins on ancestors of that appendTo element, the calendar popup does not render in the right place. If you comment out the padding, it's fine.
Also, if the DatePicker is rendered in a portal, clicking the calendar icon does not work at all. When I try in my local environment, I get an error about cal not being defined. In the Code Sandbox, it just silently fails.
Steps to reproduce the issue
https://codesandbox.io/s/codesandbox-fyj49
The text was updated successfully, but these errors were encountered: