4

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.

parth_sh
  • 69
  • 5
  • 2
    If you can't reproduce this yourself then there can only be help from somebody who has run into the same issue. You should check out the applied styles in the console since I suspect that you may have additional styles interfering. – Cuzy Apr 13 '23 at 13:03
  • 2
    This could happen because you have some relevant `::ng-deep` styles somewhere. You are definitely overwriting some styles somewhere, otherwise selected date can not be of that color – tony Apr 13 '23 at 13:04
  • @tony Yes some styles are being overridden, but only related to the coloring of the icon and calendar cell. – parth_sh Apr 14 '23 at 06:29

3 Answers3

1

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; with:

.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.

Zze
  • 18,229
  • 13
  • 85
  • 118
millenion
  • 1,218
  • 12
  • 16
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.

parth_sh
  • 69
  • 5
0

Hi this is resolved as per this StackOverflow link you can look for this

Angular material 10 date-picker (mat-datepicker) does not align with others input fields

.mat-calendar-body-cell:focus .mat-focus-indicator::before{content:normal !important;}
Avi Swarnkar
  • 1
  • 2