CODEWITHSUNDEEP
angularangular-materialangular8angular-material-datetimepicker
ANURAG RANJAN
ANURAG RANJAN

Reputation: 135

Adding border to the Mat Calander

I am trying to add border around mat calander , but unable to do it as , I am not able to find the exact class which will affect the look of the mat calander exactly that I needed like >>>>> . enter image description here

I have tried to do exactly like same given above with class 

.mat-form-field-flex {
    border: 1px solid ;
}

https://stackblitz.com/angular/bajnpdvmbqo?file=src%2Fapp%2Fdatepicker-overview-example.css

Upvotes: 0

Views: 2441

Answers (2)

Aayushi Dassani
Aayushi Dassani

Reputation: 81

You can use ::ng-deep selector like this

::ng-deep .mat-form-field-flex {
border: 1px solid gray; }

check below link for more reference https://ngrefs.com/latest/styling/ng-deep-selector

Upvotes: 0

Anil Kumar Reddy A
Anil Kumar Reddy A

Reputation: 648

This can be done easily using appearance="outline" in mat-form-field tag like

<mat-form-field appearance="outline">
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

Hope it helps!

Upvotes: 2

Related Questions