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.

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

Conversation

asudoh
Copy link
Contributor

@asudoh asudoh commented Dec 10, 2019

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

  • 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>.

Testing / Reviewing

Testing should make sure <DatePicker> is not broken.

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.
@netlify
Copy link

netlify bot commented Dec 10, 2019

Deploy preview for the-carbon-components ready!

Built with commit 6a848ce

https://deploy-preview-4846--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Dec 10, 2019

Deploy preview for carbon-elements ready!

Built with commit 6a848ce

https://deploy-preview-4846--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Dec 10, 2019

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`;
});
};
Copy link
Contributor

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!

Copy link
Contributor

@abbeyhrt abbeyhrt left a 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 !

Copy link
Member

@emyarod emyarod left a 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

@asudoh asudoh merged commit 1e09d2c into carbon-design-system:master Jan 10, 2020
@asudoh asudoh deleted the date-picker-calendar-dropdown-position branch January 10, 2020 00:39
joshblack pushed a commit to joshblack/carbon that referenced this pull request 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 pull request 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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DatePicker calendar using appendTo prop is badly positioned if ancestor has padding
4 participants