Reputation: 185
Actually my alert controller "Title" is too lengthy , so i want to resize the text and i added Css class then tried to change the style in SASS by giving font size to it unfortunately didn't worked and the buttons text are uppercase.So is there anyway to change font size of text ,buttons color and size and changing button text to lowercase?
My typescript file
import { IonicPage,AlertController} from 'ionic-angular';
import { Component,ViewChild } from '@angular/core';
import 'rxjs/add/operator/toPromise';
@IonicPage()
@Component({
selector: 'page-kpi',
templateUrl: 'kpi.html',
})
export class KpiPage {
@ViewChild(Nav) nav: Nav;
temp2:any;
lastUpdate:any;
constructor(
private alertCtrl: AlertController,
public menuCtrl : MenuController,
) {
this.platform.ready().then(() => {
this.refreshbutton();
}
});
refreshbutton(){
this.getSession();
if(this.offline == true)
{
this.offlineRefreshAlert();
}
else{
let alert = this.alertCtrl.create({
title: 'Do you really want to refresh the widgets?',
message: 'Refresh process will take time to complete.',
cssClass: 'alertLogCss',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
alert = null;
}
},
{
text: 'Refresh now',
handler: () => {
if(this.online == true){
this.refreshdata(this.result.sid);
this.loadingrefreshdashboard();
}
if(this.offline == true){
this.offlineRefreshAlert();
}
}
}
]
});
alert.present();
}
}
}
My SASS(CSS) file
.alertLogCss{
background-color: white;
color: red;
font-size: 4px;
button{
color: red;
font-size: 5px;
}
}
Upvotes: 0
Views: 4020
Reputation: 111
You have to add css out of that's page scss block
.alertLogCss{
background-color: white;
color: red;
font-size: 4px;
button{
color: red !important;
font-size: 10px;
text-transform: lowercase !important;
}
}
Put in app.scss
Upvotes: 1