AlertController background color

I’m having a problem trying to change the background color on a specific alert controller. Specifically, I’m trying to modify the SASS variable “alert-md-background-color” but only for one specific alert.

I’ve tried using cssClass: in the alert definition like this as well as using alert.setCssClass() but this doesn’t seem to work either. (It seems like the Sass variables are overriding any modification?)

So, the only way I’ve been able to successful change the background color is by setting $alert-md-background-color:#F35E5D in the variables.scss file… but that changes the background color on all alerts.

So, I’m stuck… what’s the proper way to change the background color on a specific alert? (or anything that is governed by a Sass variable, for that matter)

Thanks!

Please copy paste the actual code you are using here; basically it should be as simple as setting the cssClass.

Thanks for the reply KishuPro.

Here’s the code in the landing.ts file:

  about() {
    let alert = this.alertCtrl.create({
      title: "This is a title:",
      subTitle: 'This is a subtitle',
      cssClass: 'custom-alertDanger',
      message: `<p>This is a message </p>`, 
      buttons: [
        {
          text: 'OK',
          role: 'cancel',
          handler: () => {}}]});
    alert.present();
  }

and here’s the CSS style definition in the landing.scss page:

.md,.ios,.wp {
  page-landing {
    .custom-alertDanger {
      background-color: #F35E5D !important;
      background: #F35E5D  !important;
      color: red !important;
      $alert-md-background-color: #F35E5D;
      $alert-ios-background: #F35E5D;
    }}}

*note: I’ve tried every conceivable variation of the above (i.e. each style alone, each one with or without !important) to no avail. Also, I had other CSS styles on this page that were working, so the stylesheet is properly named and handled, etc.

This is what I get back:
image

However, when I take the same CSS code, remove it from landing.scss and put it in instead in app.scss, I get this:
image

Notice that the title and subtitle have changed color. (yay!) I used inline html in the message line so the

tag styles were used (yay!) The weird thing is that the ENTIRE background of everything except the alertcontroller is now red.

Finally, If I add this line to variable.scss (and remove all custom-alertDanger CSS definitions)

$alert-md-background-color:#F35E5D;

I get what I’m trying to do:

image

but, it’s now set for ALL of the alertController messages, instead of this specific one.

If you could point me in the right direction to try and research this, I’d greatly appreciate it.

1 Like

I don’t think you need to specify .ios, .md, .wp in your scss, but as for your specific issue I don’t think the alert will actually wind up being a child of your page, so does it look if you move .custom-alertDanger outside of the page-loading block?

Hello SigmundFroyd, and thanks for chiming in.

You’re absolutely correct, the .ios, .md .wp additions are not required. I got that from this video by Josh Morony (at the 14:00 minute mark) Basically, he suggested to add it to make you’re css file as specific as possible since the most specific CSS “wins” if there is a conflict. Therefore (as I understand it) adding that is like adding a !important for all of the subsequent styles. (Yeah… I was getting desperate)

Anyhow, to answer your question, taking the .custom-alertDanger makes the alert act the same as when I put it in the app.scss file. that is… the entire background of the page (except the alert controller background) goes red like this:
image

Also, I tried using the browser to find the style that I need to update with the idea that I could do it directly. I was able to see that using the following outside of the page-loading block:

    .alert-md .alert-message {
        background: red;
    }

almost did what I wanted as below:
image

but for ALL of the alert controllers in the application. Putting it inside of the page-loading block did nothing.

So… a step closer? I keep reading that these styles happen “outside” of the page, but I’m not sure if that means that it is possible to edit them on a per-alert basis.

EDIT: I found that using:

.alert-md .alert-wrapper {
    background-color: red;
}

did the same thing as using

$alert-md-background-color:#F35E5D;

In the variables.scss file. Again, this occurred only outside of the page-landing block, and changed all of the alerts.

EDIT 2:
I found another solution here that I still can’t make work, but seems promising. In that thread, user jeffreyCarre suggested the following:

You can add a class to the alert:

{
.., cssClass:'alert-danger'
}
in the Css:

 &.alert-danger {
    .alert-head {
      background: map-get($colors, danger);
      color: #fff;
      margin-bottom: 10px;
    }
  }

Unfortunately, I couldn’t make that work… but the &. selector seems like it might be another way to attack the problem. (more info here)

OK… I got something that works.

I found this post on stackexchange about styling toast, and the second solution from user arkade did the trick.

So, here is my alert (it hasn’t changed) in the landing.ts file:

  show_about_alert() {
    let alert = this.alertCtrl.create({
      title: "This is a title:",
      subTitle: 'This is a subtitle',
      cssClass: 'custom-alert-danger',
      message: `<p>This is a message </p>`, 
      buttons: [
        {
          text: 'OK',
          role: 'cancel',
          handler: () => {
          }
        }
      ]
    });
    alert.present();
  }

And here is the landing.scss page. (note, this could also be put in app.scss file.)

.md,
.ios,
.wp {
  .custom-alert-danger {
    > div {
      background: red; // if you don't use .md, .ios, .mp initially, you'd have to use !important here.
      color: #fff;
      margin-bottom: 10px;
    }
  }
page-landing {
   // The alert controller CssClass MUST go outside of the page definitions.
}

This gives me this:
image

So… let me pose another question.
Here’s the html I see in the browser when I look at the above:

and you can see where my custom-alert-danger is coming into play. However, how would I target JUST the background color for things inside of the custom class? For example, if I only wanted to change the background color of the:
<div class="alert-message"> ?
to get something that looks like this:
image

EDIT:
turns out it’s straightforward:

.md,
.ios,
.wp {
  .custom-alert-danger {
    > div {
      background: red;
      color: #fff;
      margin-bottom: 10px;
    }
    .alert-message{
        background: blue;
    }
  }
  page-landing {}
}

to get this:
image

I would definitely like to know if there is a more elegant way to do this.

I see that you’ve tried to attack the problem in many ways, but I think the following should be a more elegant way to do it.

In landing.ts

let alert = this.alertCtrl.create({
   ....
   cssClass: 'myalert'
});

and in landing.scss

.myalert .alert-wrapper {
    background-color: #F35E5D;
}

Try this and let me know if this works for you or not.

well, sonofagun… that worked great! (and WAY more elegant than my monstrosity.) Thanks KishuPro! (one note, though… it had to be set outside of the “landing-page” block in the scss file, for anyone that follows this in the future)

I think a better approach is to move the alert CSS to app.scss. Leaving it in a separate file but outside of the ordinary scoping block is mystifying to readers and encourages conflicts.

1 Like

You are most welcome!

Yeah it needs to be outside the page css block, it might be a good idea to move the css to the app.scss as @rapropos suggested.

Anyways, it’s good that it works for you! :+1:

I agree. thanks for the suggestion.

this works for me :
.

custom-alert-danger
  .alert-ios .alert-message,
  .alert-md .alert-message {
    max-height: 100%;
    color: white !important;
}

I have created a utilities.ts provider and AlertUtility is a class there, in which I call up AlertController.
Now I have applied the ‘cssClass’ to this Utilitities’ alertcontroller object, but then since providers don’t have any scss file, where should I mention this ‘custom-alert-danger’ css definition that is now working?

I tried to put it in app.scss as well as variables.scss but no luck.
Thanks in advance!

my code :

@Injectable()
export class AlertUtility {

constructor(private _alertCtrl: AlertController) {}

private showWarningMessage(title, subtitle, btn) {
let alert1 = this._alertCtrl.create({
title: title,
subTitle: subtitle,
cssClass: ‘custom-alert-danger’,
buttons: [btn]
});
alert1.present();
}

public presentWarning(title, subtitle, btn) {
this.showWarningMessage(title, subtitle, btn);
}

}