Angular Material DatePicker numbers squashed in UI

Posted on by

enter image description here

 <mat-form-field appearance="outline" class="pr-sm-8 date" fxFlex="100">
                <mat-label>Start date</mat-label>
                <input matInput [matDatepicker]="startDatePicker" name="deliveryStartDate" formControlName="deliveryStartDate">
                <mat-datepicker-toggle matSuffix [for]="startDatePicker" ></mat-datepicker-toggle>
                <mat-datepicker #startDatePicker></mat-datepicker>
            </mat-form-field>

I have set the view encapsulation to none and I am unable to style the numbers so they are evenly spaced out.
Does anyone know what am I doing wrong?

Source: Angular Material Quesions