Using Angular 10 and Angular material 10, using a datepicker in a form doesn't align with other input form field, as in this figure: fields not aligned
Example code in ~component.html:
<mat-form-field color="primary" appearance="fill">
<mat-label>Data Da</mat-label>
<input matInput [matDatepicker]="picker1" [(ngModel)]="dataDa">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1 color="primary"></mat-datepicker>
</mat-form-field>
<mat-form-field class="example-form-field" appearance="fill">
<mat-label>Ora Da</mat-label>
<input matInput type="text" [(ngModel)]="oraDa">
</mat-form-field>
Do you have same issue if you try it?
It seems to be a bug. I found this solution: in the ~component.scss file I've put this css rule:
::ng-deep mat-datepicker-toggle.mat-datepicker-toggle button.mat-focus-indicator.mat-icon-button.mat-button-base {
display: inherit;
}