Usage of cssClass to style alert button in Ionic

Ionic Framework ionic-v3
1

I am new to Ionic 2 and I have a little background in v1. Please I need help with setting the text color of my alert button

let alertPopup = Alert.create({
      title: 'BT Headset',
      subTitle: 'Connection failed!',
      buttons: ['OK'],
      cssClass: 'alertDanger'
    });
    this.nav.present(alertPopup);
1 Like
2

In V2, you can actually apply the css class directly to the button

http://ionicframework.com/docs/v2/api/components/alert/Alert/

3

Now Working, Thanks man!

4

@chinazha: I am also having the same trouble. If I may ask, where exactly was your cssClass ‘alertDanger’ defined? Can you pls provide similar steps to achieve custom styles for an alert component in Ionic 2 app.

5

@ventis07 you have to define your own custom class with the styles you want 

There is no build-in class for this
eg:

.alertDanger{
    background-color: white;
    color: red;
    button{
        color: red;
    }
}

It would change css accordingly.

6

@piyukore, Thanks for your response. I have defined my css class but my challenge is; where do i put the css class. In the scss of the page using the Alert component or somewhere else?. I tried for alerts, loading and datetimepicker components but none seems to be working at all.

7

that would be actually your judgement call. You can define anywhere, where the alert or other components have access to that css class.

Did you import your stylesheets in app.core.css ?

8

Yes i did import all scss for all the pages in my app.core.css.
So can i add the alertDanger (as an example) in app.core.css OR in the page class say home.scss?. Which is the most accurate. Putting the alertDanger in either app.core.css or home.scss did not actually work to reflect the css.

9

Simply create your alert like this:

let alertPopup = Alert.create({
title: ‘title’,
subTitle: ‘message’,
cssClass: ‘alertcss’,
buttons: [{
text: ‘btnType’,
cssClass: ‘buttoncss’
}]
});
this.nav.present(alertPopup);

In your app.core.scss or your page scss, define your cssClass like this:

.buttoncss{
color:#e74c3c;
/Any other style you wish to apply/
}

.alertcss{
color:#e74c3c;
/Any other style you wish to apply/
}

----Make sure your page scss is imported----

3 Likes
10

@piyukore & @chinazha Thanks so much for your help. Its now very ok. But have you guys tried the same technique on the loading component. Styles ain’t applying to that so far.

Thanks once again

1 Like
11

hey,
can i add option to take photo\add photo into the alert prompt?
maybe to call to function to do that or something like that.

12

Since RC0 I’m not able to apply my css class.
My code was working perfectly under ionic2 beta 11 and the class was applied :
` checkIfGeolocationReady() {
if (this.platform.is(‘cordova’)) {//if the platform is execute with cordova (not in a browser) we check if the user has allowed the geolocation
Diagnostic.isLocationAvailable().then((available) => {
if (available == false) {//if the user has has not the geolocation activated we ask the user if he wants do it now
let confirm = this.alertController.create({
cssClass: ‘alertText’,
title: ‘Ohé  OĂč ĂȘtes-vous ?’,
message: ‘Vous ne partagez pas votre position avec MaVillePrivĂ©e. Souhaitez-vous activer le partage maintenant afin que nous puissions vous proposer les PrivilĂšges proches de vous ?’,
buttons: [
{
text: ‘Non’,
cssClass: ‘alertDanger’,
handler: () => {
console.log(‘Disagree clicked’);
confirm.onDidDismiss(() =>{
this.getNearestPlaces();
})
}
},
{
text: ‘Oui’,
cssClass: ‘alertOkay’,
handler: () => {
console.log(‘Agree clicked’);
confirm.onDidDismiss(() =>{
if (this.platform.is(‘android’)){
Diagnostic.switchToLocationSettings();
}
else {
Diagnostic.switchToSettings();
}
})
}
}
]
});
confirm.present();

    }
    else {//we launch the getNearestPlaces function
      this.getNearestPlaces();
    }
  })
}
else {//if the platform is not execute in cordova we launch the getNearestPlaces function directly
  this.getNearestPlaces();
}

}

`

Can someone help me ?

1 Like
13

Same problem for me, just updated ionic (2.1.7) and installed a new tutorial fresh app.
Added in home-page a button and in ts file code below:

@Component({
selector: ‘hello-ionic-page’,
templateUrl: ‘hello-ionic.html’
})
export class HelloIonicPage {
constructor(public alertCtrl: AlertController) {
}

showConfirm(itemPlate){
var titleStr = ('Do you confirm the use of vehicle ’ + itemPlate + ‘?’);
//console.log(titleStr);

let alert = this.alertCtrl.create({
  
  title: 'WARNING',
  message: titleStr,
  buttons: [
    {
      text: 'No',
      handler: () => {
        console.log('Disagree clicked');
      },
      cssClass: 'alertDanger'
    },
    {
      text: 'Yes',
      handler: () => {
        console.log('Agree clicked');
      },
      cssClass: 'alertDanger'
    }
  ]
});

alert.present();

}
}

The *scsss file:

hello-ionic-page {
p {
margin: 20px 0;
line-height: 22px;
font-size: 16px;
}

.alertDanger{
background-color: white;
color: red;
button{
color: red;
}
}
}

The alert popup is keeping color blue.

1 Like
14

Whoever might have this problem, I added in the following:
.alert-ios .alert-wrapper{
button.alertButton{
background-color: red !important;
}
}
into app.scss (while adding the css class into the alert as described above).
Don’t know if the file or the further specification “.alert-ios .alert-wrapper” do the trick.

1 Like
15

I have done the same thing. With just a couple of lines of CSS (in my app.css) I was able to completely restyle all of the Ionic alerts, popups etc and when I create them I simply apply a single, root cssClass. Works beautifully.

16

this works fine for me

.alert-md .alert-button{
color:green
}

17

Trying to make the alert box a little taller. I can’t seem to be able to override it.

This is the scss we are using. (the purple is just to see it working).

.locationPopupHeight {
    .alert-ios .alert-message,
    .alert-md .alert-message {
        max-height: 100%;
        color: purple;
    }
}

This is in app.scss

The alert has the style
cssClass: ‘locationPopupHeight’,

Nothing changes.

But if I just add

.alert-ios .alert-message,
    .alert-md .alert-message {
        max-height: 300px;
        color:orange;
    }

Works fine. Doesn’t need to be part of the cssClass.

How to wrap the scss style so it only is being used in the one alert controller?

18

image
image739×498 21.1 KB