简体   繁体   中英

Changing styles and text modification of alert controller in ionic 2

在此处输入图片说明

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?

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;
  }
}

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM