Customize Alert

Ionic Framework ionic-v3
1

Hi!

I’m trying to modify an alert. I want to modify the head background etc.

I know I can modify the global variables, but I just want to modify this one in this page, not all of them.

There is any way to do it?

And there is any way to add an image to the alert? I was using a modal, but its a pain in the ass… I had resizing problems when the keyboard shows up etc.

Thanks!!

2

You can probably give the alert a class or id - should be in documentation.
Images I haven’t seen in an alert yet - which doesn’t mean it isn’t possible, just not common.

3

I already tried that. I mean, giving the alert a css or a class. But doesnt work :frowning:

It will be enough if I can change the background-color of the header, and the font-size of the message. But I can’t find a way.

4

What version of the framework are you on? Because it’s possible to add an cssClass by providing options when creating the alert as @Sujan12 said. The documentation is found over here: http://ionicframework.com/docs/api/components/alert/AlertController/. Could you please show us how you’ve tried to add a css class?

5

someMetyhod() {
let alert = this.alertCtrl.create({
title: ‘¡Some Title!’,
message: ‘Some Text’,
buttons: [‘Aceptar’],
cssClass: ‘my-class’
});
alert.present();
}

And then, inside my-class in the page.scss I tried to use the css classes that the alert is using. But couldn’t make it work.

6

Okay, your code for the cssClass looks good. I’ve tried it myself and indeed it doesn’t seem to work. Could be a bug, but I should look into that. If you want to change the alert-header you could change this class:

.alert-head {
  background-color: #whateveriwant;
}

for the message you can address this class:

.alert-message {
  font-size: 20px;
}

You should add those to your app.scss since the alertDialog is created outside of your component.

EDIT: Too fast. adding a cssClass does work off course, just style it inside your app.scss and not in your page.scss.

1 Like
7

Thanks for your answer.

But if I add those to my app.scss, it will change all my alerts to that values.

In my particular case, I need one with bigger font-size than the others. Thats why I need to customize them.

8

okay, I was too fast. Add the cssClass through the options and set its style inside your app.scss. That should work. Principal is the same. Alert is created outside the scope of your page, but it’s getting the css class added though.

2 Likes
9

So if I understood well, do you mean that in the app.scss I need to add this css:

.my-class {
.alert-head {
background-color: #whateveriwant;
}
.alert-message {
font-size: 20px;
}
}

Am I right?

Thank you!

10

Yes, like that :slight_smile: I guess it feels a little bit counter intuitive, but that should definitely work. If you come to think about it, it makes sense though. Because the alert is also created outside of your component (and thus out of it’s scope).

11

This solved a mystery for me, thank you!

12

I had to look a couple of times myself as well. Glad to have solved some mysteries tonight :wink:

1 Like
13

adding that to global.scss worked for me.