Angular 5 material DatePicker layout gets congested for some months

Question

I used mat-datepicker in angular 5 to get input date. However when the calender opens up, a few months layout is odd (content gets congested). Other months look fine.

I have imported indigo-pink.css in my styles.css too

html code:

<tr style="width:50%">
                <td>
                  <span class="cellLabel">Choose a Date for Installation:</span>
                </td>
                <td>
                  <span class="cellLabelMand">
                    <mat-form-field>
                      <input matInput [matDatepicker]="picker" [(ngModel)]="date" placeholder="Choose a date">
                      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                      <mat-datepicker #picker></mat-datepicker>
                    </mat-form-field>
                  </span>
                </td>
              </tr>

app.module.ts has the following import:

import {MatDatepickerModule, MatNativeDateModule, MatInputModule, MatFormFieldModule} from '@angular/material';
these modules are also added to imports and exports

The layout should not get congested for some months. Please help me get it fixed.

Could you provide a minimal reproduction in a stackblitz template :stackblitz.com/angular/…? — julianobrasil
@jpavel i tried. you can review. but there is some error over there. Don't know whats that: Error in styles.css Error: ENOENT: No such file or directory., '/dev/null' — Irram
I fixed it myself. I hope it helps someone. Its really important to check if you are using datepicker in table cells. The already applied css on table rows or cells can affect it and it becomes really hard to find out the solution. — Irram

Irram Irram · Accepted Answer · 2019-06-22T20:08:28

I fixed it myself. I hope it helps someone. Its really important to check if you are using datepicker in table cells. The already applied css on table rows or cells can affect it and it becomes really hard to find out the solution. In this case, i had applied width of 50% on my table cells already which was causing the problem.

Angular 5 material DatePicker layout gets congested for some months

1 Answers