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

[Feature] Add useFixedPosition prop to render picker outside an "overflow: hidden" div #779

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

AdrielD
Copy link

@AdrielD AdrielD commented Mar 1, 2021

Description

This PR adds new optional flag, so users can force fixed position rendering and then calculating it's position based on datepicker's wrapper. This is useful in cases where the datepicker is rendered inside a div with hidden overflow and the view is being cropped.

Motivation and Context

I developed this solution while working on a dynamic table that would scroll laterally, with datepickers as headers. When the table had just a few or no rows, the div container would severely crop datepicker's view.

Default datepicker
datepicker1

WIth applied solution:
datepicker2

Also, this PR should solve issue 186

Checklist

[X] I have not included any built dist files (us maintainers do that prior to a new release)
[X] I have added tests covering my changes
[X] All new and existing tests pass
[X] My changes required the documentation to be updated
  [X] I have updated the documentation accordingly
  [X] I have updated the TypeScript 1.8 type definitions accordingly
  [X] I have updated the TypeScript 2.0+ type definitions accordingly

Adriel Dinelli added 3 commits March 1, 2021 17:10
In some cases, if the datepicker is rendered inside a div with hidden overflow,
it will appear cropped. The useFixedPosition flag will tell this component to
render the picker relative to it's wrapper, using refs.
@erpardeepjain
Copy link

This should be merged, much need PR

@TonniDev
Copy link

+1 to merge this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants