-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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.
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
fix(DatePicker): fix calendar dropdown position #4846
fix(DatePicker): fix calendar dropdown position #4846
Conversation
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.
Deploy preview for the-carbon-components ready! Built with commit 6a848ce https://deploy-preview-4846--the-carbon-components.netlify.com |
Deploy preview for carbon-elements ready! Built with commit 6a848ce |
Deploy preview for carbon-components-react ready! Built with commit 6a848ce https://deploy-preview-4846--carbon-components-react.netlify.com |
calendarContainer.style.top = `${refBottom - containerTop + 2}px`; | ||
calendarContainer.style.left = `${refLeft - containerLeft}px`; | ||
}); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @asudoh! I haven't worked much with positioning via javascript, could you explain what's going on here so I can learn a bit more about it? Thank you!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to me! Thanks for taking the time to explain what's going on @asudoh !
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good to me, tested against the original sandbox and the calendar now positions properly with React portals
…#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.
…#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.
This change introduces 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.
Changelog
New
appendTo
and the floating menu container has significant offset from<body>
.Testing / Reviewing
Testing should make sure
<DatePicker>
is not broken.