Angular Ionic CSS not being applied

Question

I am working on an Ionic and Angular project. I just can't figure out how to control the padding on elements wrapped around ion-item. I've looked at several solutions and none seem to work:

I have looked at both of these rsources and I can't get my spacing to reflect my stylesheets.

https://ionicframework.com/docs/layout/css-utilities#content-space

Why Ionic 5 content padding is not working?

For example I have the following:

              <ion-col size-lg="8" class="ion-padding">
                <ion-item lines="none">
                  <ion-label >{{stat.playerDisplayName}}</ion-label>
                </ion-item>
              </ion-col>
              
              <ion-col size-lg="2" class="ion-padding">
                <ion-item lines="none">
                  <ion-label>{{stat.goals}}</ion-label>
                </ion-item>
              </ion-col>

I have tried the following but nothing changes on my file:

  ion-padding {
    padding: 0px;
  }

  ion-padding {
    --ion-padding: 0px;
  }

I have tried using the official documentation also but to no avail. I did ionic -v and it shows 6.10.0. I looked at my package file and I see the following:

"@ionic-native/core": "^5.0.7",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0"

What am I missing?

Here is my full code:

HTML FILE

<ion-row *ngFor="let item of items; let i = index" class="ion-text-center no-padding">
  <ion-col>
    <ion-item>
      <h5>{{product.productName}}</h5>
    </ion-item>
  </ion-col>
</ion-row>
<ion-row>

    <ion-col>
      <ion-item>
        <ion-select [(ngModel)]="selectedProductId">
          <ion-item>
            <ion-select-option value="">Select Product</ion-select-option>
          </ion-item>
          <ion-item *ngFor="let product of Products">
            <ion-select-option [value]="product.productId">{{product.productName}}</ion-select-option>
          </ion-item>
        </ion-select>
      </ion-item>
    </ion-col>

</ion-row>
<ion-row>
  <ion-item>
    <ion-button color="success" (click)="onAddProduct()">
      Add Product
    </ion-button>
  </ion-item>
</ion-row>

CSS FILE

.no-padding{
    padding: 0px;
}

Shabbir Dhangot Shabbir Dhangot · Accepted Answer · 2020-07-29T18:25:43

You need to set ion-col padding to 0 using below way. Its so simple. Remove classes which you have added.

ion-row>ion-col {
   padding: 0px !important;
}

Try with !important property. If that not work try to give below class in css and use the same in HTML.

.padding-zero {
    padding: 0px !important;
}

Try and let me know if it works for you.

Angular Ionic CSS not being applied

1 Answers