Ionic alertcontroller cssclass

Ionic Framework ionic-v3
1

how to add class to allert controller ? i’try this…

presentAlert() {
let alert = this.alertCtrl.create({
title: ‘Low battery’,
subTitle: ‘10% of battery remaining’,
buttons: [‘Dismiss’],
cssClass: ‘backRed’
});
alert.present();
}

page-home{
.backRed: background-color:red;
}

2

Dude, please post your code in < /> . Think you would know by now :wink: To answer your question:

.backRed should be added in your app.scss because the AlertController is created outside your page-home. Then it will work.

1 Like
3

Thanks my friend! You’re welcome again!

4

I’m having a similar problem. My css does not seem to be applying to my LoadingController window

In my .ts file, I have the following code:

const loading = this.loadingCtrl.create({
      content: 'Loading...',
      spinner: 'dots',
      cssClass: 'customLoader'
    });
    loading.present();

In my app.scss, I added:

.customLoader {
  background-color: transparent;
  box-shadow: none;
  color:red;
}

The css is not applying, still have a white background with black text.
What am-I not seeing?
I’m running this in a Tabs root component in case that has any bearing.

_@ionic/cli-utils  : 1.13.1_

_ ionic (Ionic CLI) : 3.13.2_
_ cordova (Cordova CLI) : 6.5.0_
_ @ionic/app-scripts : 1.3.12_
_ Cordova Platforms : android 6.2.1 ios 4.3.1_
_ Ionic Framework : ionic-angular 3.5.3_
_ Android SDK Tools : 26.0.2_
_ Node : v6.10.3_
_ npm : 3.10.8_
_ OS : Windows 10_

UPDATE: Fixed
The following worked if I put it in app.scss or myPage.scss:

.customLoader {
  .loading-wrapper {
    border-radius: 20px;
    background-color: darkblue;
    color: orange;
  }
}
5

In fact you can add it in the page scss but just outside of the tag page-home in case you need it only in that page, also to keep the code for that page in one place. If you want it globally then yes the app.scss is the answer.

Also thanks for the answers! :smiley: