Search code examples
cssangularangular-material

mat-form-field occupying more area causing other controls moving away from it

I am using Angular, Angular Material and CSS

My mat-form-field code is as below..

<mat-form-field  class="custom-form-field" appearance="outline" style="padding-top: 0px;padding-bottom: 0px; line-height: 0px;">
    <input style="padding-top: 0px; padding-bottom: 0px;" matInput type="text" id="onSearch" (keyup)="keyUp($event)">
    <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

And with this the front-end looks like this while I inspect that part

Subscriber Groups

The mat-form-field is occupying the extra Green color so the checkboxes are coming down.

Even if I set padding-bottom: 0px or margin-bottom: 0px, still it is occupying that space.

How to remove that space?

Solution

  • You can just do the CSS

    .custom-form-field .mat-form-field-wrapper {
  margin: 0px !important;
  padding-bottom: 0px !important;
 }

    stackblitz -> cd test -> npm i -> npm run start