My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows:
To prevent any custom CSS from impacting the view, I have removed all customized styles.
Therefore, my HTML remains simple as I have copied and pasted the basic datepicker example from the Angular official portal:
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
However, based on the Angular Material example online, the image should look more like this: Basic datepicker from Angular Material online help
What could I be doing wrong?