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

Add position prop #791

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

Add position prop #791

wants to merge 2 commits into from

Conversation

rohit267
Copy link

Description

Added position prop to show the datepicker above the input feild. It accepts up as value

Motivation and Context

This should be helpful when the input field is at the bottom of the screen. In this case the datepicker is overflowing the sreen without any scroll. This prop solves the proplem.

Checklist

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

Rohit Mahto and others added 2 commits May 11, 2021 20:22
@rohit267
Copy link
Author

@arqex please consider this

Comment on lines +19 to +22
.rdtUp{
position: absolute;
top: -306px;
}
Copy link

@IndrekV IndrekV May 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this 1 style to rdtPicker would fix the open in top problem reliably. Meaning that the popup will always be in the correct place no matter if in calendar or time view which have different heights. The static -306px top position would only work for one of the views.

.rdtPicker {
  bottom: 100%;
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok maybe this can solve the problem of going out of the screen, if anyone want the datepicker above the input field, this prop can be helpful, a little refraction may be needed.

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

2 participants