Ionic alertcontroller cssclass


#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.


#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;
  }
}