DatePicker Z-Index Issue

[saeidrastak]

I add datepicker in to my page in a angular material dialog as below:

 <mat-form-field class="fieldSetItem" *ngSwitchCase="'datepicker-shamsi'" fxFill
                          [floatLabel]="showLabel || question.showLabel ? 'auto' : 'never'">
            <input matInput
                   [id]="question.id"
                   [formControlName]="question.key"
                   [placeholder]="question.placeholder"
                   [name]="question.name"
                   [dpDayPicker]="question.datePickerConfig"
                   theme="dp-material" attachTo=".mat-form-field-wrapper"
                   autocomplete="off">
            <mat-error *ngIf="hasError(question.key, 'required')">{{'FIELD_IS_REQUIRED' | translate}}</mat-error>
          </mat-form-field>

And my datepicker config is:

datePickerConfig: {
            drops: 'down',
            opens: 'left',
            format: 'DD-MM-YYYY',
            locale: 'fa'
          }

but my dialog show scrollbar and datepicker does not show properly.

[fingerpich]

Please take a look at #44 #47 and fix its style

[alieshghi]

I have not understand yet, how to change z-index work here, @fingerpich as you said I changed style like :

 /deep/ dp-date-picker {
       .dp-calendar-nav-container{
                  background: #464646 !important;
                  color: #ffffff;
       }
}

but still no result. or even change that to

 /deep/ dp-date-picker {
       .dp-calendar-nav-container{
                  background: #464646 !important;
                  color: #ffffff;
                  z-index: 9999;
       }
}