How to customize @angular-material-components/datetime-picker width?

Issue

I’m using @angular-material-components/datetime-picker library for date picker. I use hideTime to just display date picker. The simplified code is below.

<mat-form-field>
    <input matInput [ngxMatDatetimePicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker hideTime="true">
    </ngx-mat-datetime-picker>
</mat-form-field>

The result is as follows.

enter image description here

How can I adjust the width of this date picker so that the highlighted area is minimal?

I tried the following style class in styles.scss, hoping to overwrite its default styling, but it does not work

.mat-form-field-wrapper {
  width: 150px !important;
  height: 36px !important;
}

Please help. Thank you

Solution

You need :host ::ng-deep to allow the access of DOM elements that are not in your component’s HTML and overwrite its CSS styling rule.

Note:

Be sure to include the :host selector before ::ng-deep. If the
::ng-deep combinator is used without the :host pseudo-class selector,
the style can bleed into other components.

.component.css

:host ::ng-deep .mat-form-field-wrapper {
  width: 150px !important;
  height: 36px !important;
}

Sample Solution on StackBlitz


References

(deprecated) /deep/, >>>, and ::ng-deep

Answered By – Yong Shun

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.