The great Ionic component library makes us create displays fast and easy. I encountered a bug with Ionic buttons:

<ion-button class="ion-no-padding">Back to overview</ion-button>

I expected a button with no padding on the left and the right. Because when you look at the CSS of "ion-no-padding" in node_modules/@ionic/angular/css/padding.css, it says:

.ion-no-padding {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

Solution

I had to use old-school "!important" to my custom CSS for this to work properly:

.ion-no-padding {
  --padding-start: 0 !important;
  --padding-end: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

 

 

 

Saved you some valuable time?

Received 95€ so far from 3 kind contributors.