Angular material datepicker does't arrange items on a single row-CodePudding

In my web application I'm using an angular material datepicker. The issue is that it does not show all the elements in a row. This is my view:

Datepicker

To avoid that my customized css has an impact on the view I removed every customized style.

This way, my html is very simple. I simply copied and pasted the angular material example from angular official portal (basic datepicker item):

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

But according to the angular material exaple on-line the image should be something like this: Basi datepicker from angular material online help

In what am I wrong?

CodePudding user response：

Try using matSuffix instead of matIconSuffix in your mat-datepicker-toggle.

CodePudding user response：

check your css component, a very cheap line effected on datepicker