How to apply styles to a confirmation alert?


#1

I was searching how to achieve it but I couldn’t figure it out. Please have a look and tell me what I’m doing wrong:

booking-confirmation.html

<ion-content>
	<div class="detailcontent">
		.
                .
                .
		<ion-item>
			<button class="payConfirmation" ion-button clear text-uppercase color="greengrass" (click)="payment_method()" large item-right>
				PAY
			</button>
		</ion-item>
	</div>
</ion-content>

booking-confirmation.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

@IonicPage()
@Component({
	selector: 'page-booking-confirmation',
	templateUrl: 'booking-confirmation.html',
})
export class BookingConfirmationPage {

	constructor(public navCtrl: NavController, public navParams: NavParams, public alerCtrl: AlertController) {	}	

payment_method() {

		let method = this.alerCtrl.create({			
			message: 'Payment Method',
			buttons: [
				{
					text: 'Individual',
					cssClass: 'method-color',
					handler: () => {
						console.log('Individual clicked');
					}
				},
				{
					text: 'Group',
					cssClass: 'method-color',
					handler: () => {
						console.log('Group clicked');
					}
				}
			]
		});
		method.present()

	}
}

booking-confirmation.ts

page-booking-confirmation {

	.method-color{
		color: rgba(136,168,39,1);
	}
        .
        .
        .
}

Graphically I want this:

But I got this:

Please help


#2

This is sort of confusing, but alerts live outside your page. You need to move alert-specific styling to the global app.scss.


#3

Thanks for your reply

I change it to the app.scss file but it doesn’t work.


#4

My CSS knowledge is pretty weak, but it looks like your color selector is clashing with the theme. Generally I dislike doing this, but you can try overriding with !important.


#5

Surely, it is not the most elegant way, but it works, thank you a lot!