Bug: Datepicker outside visible area when opened in dialog
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When the mat-datepicker is opened in a component shown with the MatDialogRef on a small screen, the calendar picker is shown outside the visible area.
### Reproduction
1. Create a component that contains mat-datepicker
2. Open that component with the MatDialogRef
3. Reduce the screen size to something around iPad size
4. Click on the calendar icon of the mat-datepicker to open the date selection
5. See that dialog is outside of the visible area
https://stackblitz.com/edit/angular-mvkv5q
### Expected Behavior
The calendar-dialog can still be operated and all dates and actions are visible or accessible throw scroll.
### Actual Behavior
The calendar-dialog is outside of the visible area
### Environment
OS: Windows 10
Browser Chrome
Version 109.0.5414.122
Contributor guide
Research direction
Start with the linked StackBlitz reproduction, focusing on the mat-datepicker opened through MatDialogRef at an iPad-sized viewport. Reproduce the positioning issue in Chrome, then verify that the calendar dialog remains visible, operable, or reachable through scrolling when the fix is complete.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100