CODEWITHSUNDEEP
angularangular8
Ankita
Ankita

Reputation: 209

How to lower the width and height of the Material datepicker calender in Angular 8?

I am using material date picker for calender in Angular 8. I am trying to lessen the width and height of the calender because it is very huge and does not suit in my page. Please help out.

The style I applied is below on page and the html:

<style>
   .mat-datepicker-content .mat-calendar {
       width: 229px!important;
       height: 300px!important;
   }
</style>    
    <input matInput [matDatepicker]="picker" placeholder="DD/MM/YYYY" class="modifyDate (click)="picker.open()">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepickertoggle>
    <mat-datepicker #picker></mat-datepicker>

I am unable to do so. My css isn't applying though. Note : The above datepicker is inbuilt for Angular 8. Can we even change the styling of inbuilt elements in Angular8. I am a beginner.

Upvotes: 3

Views: 11822

Answers (2)

eyoeldefare
eyoeldefare

Reputation: 2303

Its preferable you only change the width and not height as u won't have to worry about weird behaviors. It adjusts the height with the width.

Since mat-calendar uses none view encapsulation, its style can be overridden from any component.

.mat-calendar {width:...}

Upvotes: 0

ic_paty
ic_paty

Reputation: 432

Try to add ::ng-deep before your style code in order to override default material style: it will be like that: 

     ::ng-deep .mat-datepicker-content .mat-calendar {
        width: 229px!important;
        height: 300px!important;
    }

Upvotes: 1

Related Questions