Can't remove the space where the Date-picker Label was supposed to be

Question

I am trying to remove the extra space where the label was supposed to be (the green part)

This seems to be the CSS for the date-picker, now here comes the problem :

I added this in the .css file, but it doesn't seem to do anything.

.mat-form-field-appearance-fill .mat-form-field-flex {
padding-top: 0.0em !important;
padding-right: 0.0em !important;
padding-bottom: 0px !important;
padding-left: 0.0em !important; 
}

Yes, the CSS file is linked to the html file, when I try to modify something else it works.

Any ideas why?

EDIT: I am using the Angular Material Date-picker

This is the HTML

<mat-form-field appearance="fill">
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="from" placeholder="From">
    <input matEndDate formControlName="to" placeholder="To">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
  <mat-error *ngIf="range.controls.from.hasError('matStartDateInvalid')">Invalid starting date!</mat-error>
  <mat-error *ngIf="range.controls.to.hasError('matEndDateInvalid')">Invalid ending date!</mat-error>
</mat-form-field>

Answer 1

Your CSS rules are correct. You are most likely running into view encapsulation issues.

If you are using the CSS file defined by your styleUrls array in your component, your rules will not pierce through to the Angular component. You can get around this in two ways.

1. Move your rules to a top level css/scss file.

2. Use the ::ng-deep pseudo-class to apply the rule from your component. (I'd recommend nesting this in the :host pseudo-class to limit your scope).

   :host ::ng-deep .your-class {
        // rules
   }
   

Here is a StackBlitz to show both these methods working: https://stackblitz.com/edit/angular-bvn3gy?file=src%2Fapp%2Fdate-range-picker-comparison-example.css