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.

Sign up for GitHub

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

Jump to bottom

Datepicker height issue with large custom header #20459

Closed
dexster opened this issue Aug 31, 2020 · 2 comments
Closed

Datepicker height issue with large custom header #20459

dexster opened this issue Aug 31, 2020 · 2 comments
Assignees
@ramprakashram
Labels
area: material/datepicker help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@dexster
Copy link

dexster commented Aug 31, 2020 •
edited
Loading

Reproduction

https://stackblitz.com/edit/components-issue-9tpthp

Steps to reproduce:

  1. Create a custom calendar header with a height of 100px;
  2. If there are 6 day rows in a month then the calendar has this style issue. If the height was greater it would affect more rows

Expected Behavior

Calendar content should remain inside container. mat-calendar-content should probably have an independent height style from the heading.

Actual Behavior

Container not resizing to accomodate header height:
datepicker

Environment

  • Angular: 10.0.3
  • CDK/Material : 10.0.1
  • Browser(s): Firefox/Chrome
  • Operating System: macOS
@dexster dexster added the needs triage This issue needs to be triaged by the team label Aug 31, 2020
DmitryKovganov pushed a commit to DmitryKovganov/components that referenced this issue Sep 2, 2020
fix(material/datepicker): height issue with large custom header
8c31f2d 
Fixes a bug in the Angular Material `datepicker` component when the sum of the header height and the content is not 354px. This is because we have a predefined height value, but we should use auto value to fit the content.

Fixes angular#20459
@DmitryKovganov DmitryKovganov mentioned this issue Sep 2, 2020
Closed
DmitryKovganov pushed a commit to DmitryKovganov/components that referenced this issue Sep 2, 2020
@DmitryKovganov
fix(material/datepicker): height issue with large custom header
e387a7e 
Fixes a bug in the Angular Material `datepicker` component when the sum of the header height and the content is not 354px. This is because we have a predefined height value, but we should use auto value to fit the content.

Fixes angular#20459
DmitryKovganov added a commit to DmitryKovganov/components that referenced this issue Sep 2, 2020
@DmitryKovganov
fix(material/datepicker): height issue with large custom header
e1452ca 
Fixes a bug in the Angular Material `datepicker` component when the sum of the header height and the content is not 354px. This is because we have a predefined height value, but we should use auto value to fit the content.

Fixes angular#20459
@wagnermaciel wagnermaciel added area: material/datepicker help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Sep 3, 2020
@ramprakashram
Copy link
Contributor

Can i take up this issue ?

ramprakashram added a commit to ramprakashram/components that referenced this issue Jan 22, 2022
@ramprakashram
fix(material/datepicker): content overflowing when large custom heade…
90785c0 
…r is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This is because of the fixed height provided is not enough with custom headers, so added a new class which will set the height of calendar to auto when custom header is given.

Fixes angular#20459
ramprakashram added a commit to ramprakashram/components that referenced this issue Jan 22, 2022
@ramprakashram
fix(material/datepicker): content overflowing when large custom heade…
6d428d3 
…r is provided

    Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit adds comments for the changes done for this bug.

    Fixes angular#20459
ramprakashram added a commit to ramprakashram/components that referenced this issue Jan 26, 2022
@ramprakashram
fix(material/datepicker): content overflowing when large custom heade…
a1c51b8 
…r is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit updates the html to use plain class instead of ngClass and removes the $non-touch-custom-header-calendar-height scss variable.

Fixes angular#20459
@ramprakashram ramprakashram mentioned this issue Jan 26, 2022
Merged
amysorto pushed a commit that referenced this issue Jan 28, 2022
@ramprakashram @amysorto
fix(material/datepicker): content overflowing when large custom heade…
d8ddfb0 
…r is provided (#24255)

* fix(material/datepicker): content overflowing when large custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This is because of the fixed height provided is not enough with custom headers, so added a new class which will set the height of calendar to auto when custom header is given.

Fixes #20459

* fix(material/datepicker): content overflowing when large custom header is provided

    Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit adds comments for the changes done for this bug.

    Fixes #20459

* fix(material/datepicker): content overflowing when large custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit updates the html to use plain class instead of ngClass and removes the $non-touch-custom-header-calendar-height scss variable.

Fixes #20459

(cherry picked from commit 1933225)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 28, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@ramprakashram @forsti0506
fix(material/datepicker): content overflowing when large custom heade…
f22506b 
…r is provided (angular#24255)

* fix(material/datepicker): content overflowing when large custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This is because of the fixed height provided is not enough with custom headers, so added a new class which will set the height of calendar to auto when custom header is given.

Fixes angular#20459

* fix(material/datepicker): content overflowing when large custom header is provided

    Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit adds comments for the changes done for this bug.

    Fixes angular#20459

* fix(material/datepicker): content overflowing when large custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit updates the html to use plain class instead of ngClass and removes the $non-touch-custom-header-calendar-height scss variable.

Fixes angular#20459
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ramprakashram ramprakashram

Labels
area: material/datepicker help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/datepicker): height issue with large custom header DmitryKovganov/components
3 participants
@dexster @wagnermaciel @ramprakashram