How to remove unwanted whitespace between mat-card-header and ion-grid

Issue

I am working on an Ionic angular application.

On the page I’m currently working on I have an angular material <mat-card> with a <mat-card-header> (red border) with two <mat-card-title> tags each inside an <ion-col> (blue border) and formatted with <ion-grid> (pink border). To organize my overall formatting for the card I’m starting by attempting to remove any padding that exists by default. To get rid of this padding I have a no-space class in my CSS with the following properties.

.no-space {
  padding: 0px !important;
  margin: 0px !important;
}

This class is applied to the following tags <mat-card> <mat-card-header> <ion-grid>. There is still space between the <ion-grid> and the <mat-card-header>. What could be causing the spacing to still exist? Below I’ll include a screenshot showing this space with the HTML and SCSS files

HTML file

<mat-card class="no-space">
  <mat-card-header class="red-border no-space">
    <ion-grid class="pink-border no-space">
      <ion-row>
        <ion-col class="blue-border">
          <!-- formatted to left showing starting date -->
          <mat-card-title>Example Date</mat-card-title>
        </ion-col>
        <ion-col class="blue-border"></ion-col>
        <ion-col class="blue-border">
          <!-- formatted to right side shows money spent / total -->
          <mat-card-title>$$$/$$$</mat-card-title>
        </ion-col>
      </ion-row>
    </ion-grid>
  </mat-card-header>
  <!-- a progress bar displaying spent / total -->
  <mat-card-content class="no-space">Simple Card</mat-card-content>
  <mat-card-actions class="no-space">
    <ion-button fill="solid" color="tertiary">Expand Card</ion-button>
  </mat-card-actions>
</mat-card>

SCSS file

.red-border {
  border-color: red;
  border-width: 3px;
  border-style: solid;
}

.pink-border {
  border-color: pink;
  border-width: 5px;
  border-style: solid;
}

.blue-border {
  border-color: blue;
  border-width: 3px;
  border-style: solid;
}

.no-space {
  padding: 0px !important;
  margin: 0px !important;
}

enter image description here

EDIT: I’ve tried this solution but it didn’t remove the whitespace How to remove space (margin/padding) of ion-row and ion-col in ionic? See my comment below.

Solution

Thanks to the comment from E. Maggini I found what was causing the extra space. An extra <div> with the class "mat-card-header-text" is added into my code when it compiles. See picture below.

enter image description here

The best solution I found to fix this is to add styling to the .mat-card-header-text class to reduce the margin to 0 See solution here. To properly apply the styling include the ::ng-deep combinator before the class. The use of ::ng-deep has been deprecated but there dosen’t seem to be a good replacement so since this is a side project I’ll still use it. I found one recomendation to precede ::ng-deep with :host to prevent unwanted behavior from using ::ng-deep. Here is the final code I used for my solution.

:host ::ng-deep .mat-card-header-text {
  margin: 0px !important;
}

Answered By – Noah Jackson

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published