Question 50630 in Javascript Question posted in
A very good W3school tutorial can be found here.

Angular 15 <mat-datepicker> cell-content alignment issue – Javascript

Scenario: I have upgraded a project from angular 12 to 15, angular material has been upgraded to 15.2.6.
No external css is added for date-picker.

When opening the calendear, the date selected is aligned towards left.

enter image description here

As soon as the focus is changed(clicked anywhere else in the calendar window). alignment is corrected.

enter image description here

This is bare metal mat-datepicker, nothing extra is added.

I created a another project and there mat-datepicker is working perfectly fine. I tried to overide scss of mat-datepicker but found no success, with this alignment issue.
If somebody faced this issue please help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @Cuzy I found out that some internal libraries were interfering with mat-datepicker styling, as in angular material 15 many guidelines are changed. Removed those libraries

    Tried overriding style classes

    .mat-calendar-body-cell {
  .mat-calendar-body-selected {
    padding-left: 10px;
    padding-right: 0;
  }
}

    This has helped but not entirely, after clicking on dates now it's coming in the center because of the extra padding I have added.

    enter image description here

    But when clicking disabled dates it comes towards the right. And disabled dates shift towards the left.

    enter image description here

    @Tony yes we are overriding styles related to color, But not related to calendar-cell-content.


  2. 0

    I had the same issue once i migrated to Angular 14 to 15.

    There seems to be a weird margin-right applied to icons, i had to remove theme manualy in global styles.

    .mat-mdc-button>.mat-icon, .mat-mdc-raised-button>.mat-icon, .mat-mdc-flat-button>.mat-icon {
  margin-right: 0!important;
}

    I should point out that this problem does not occur on newly created projects through angular cli.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search