CODEWITHSUNDEEP
ionic-frameworksassalert
AnaCS
AnaCS

Reputation: 1011

How to apply css to text inside an ionic alert?

I have an alert where I have some text and one ionicon and I want to change its color and adjust its size and position (center) and I created a css class tried to apply it but it doesn't work, even thought HTML seems to work, I used the <b> tag just fine.
My code:

async presentAlertError(data) {
    const alert = await this.alertController.create({
      header: 'Confirmation',
      message: '<ion-icon name="close" class="custom-icon-notfound" > </ion-icon>'  + "Registration " + data.statusText,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (aux) => {
            console.log('Confirm Cancel: aux');
          }
        }, {
          text: 'Scan Next',
          handler: () => {
            this.scanCode();
            console.log('Confirm ');
          }
        }
      ]
    });
    await alert.present()

Should I do this in a different way?

Upvotes: 2

Views: 3221

Answers (1)

Ira Watt
Ira Watt

Reputation: 2135

The ion-alert isnt displayed in the home page or (whatever page/component you have the alert on) shadow DOM so styling wont affect it if you add it there, you have to add the styles to an element which is in the same scope as the alert. I added the class to variables.scss as that has the highest scope:

variables.scss-

   .secondary {
            color: #A0A !important;
            font-size: 2em !important;
        }

   .custom-icon-notfound {color: red}

enter image description here

also need added !important so it ignores its previous styling.

Upvotes: 4

Related Questions