Changing styles and text modification of alert controller in ionic 2

Question

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

Can you create a working code snippet of this using codepen/jsfiddle/plunker etc? it would be faster to answer. — Vikasdeep Singh, May 31 '18 at 04:59
i think adding alert controller in codepen or jsfibble is too difficult, alertcontroller is in main app module — Arjun Ramdas, May 31 '18 at 05:42

score 1 · Answer 1 · answered May 31 '18 at 05:06

1

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

answered May 31 '18 at 05:06

Dhara Gadhiya

165
8

it's already on app.scss....Is it possible to add a image or icon in alertcontroller? – Arjun Ramdas May 31 '18 at 05:37
You can write message property like this message: '
Refresh process will take time to complete.
', – Dhara Gadhiya May 31 '18 at 05:56
Actually text-transformation directly to lower case is there any way the make first letter uppercase like "Refresh Now"..... – Arjun Ramdas May 31 '18 at 06:25
For that, you can write text-transformation = "capitalize !important" – Dhara Gadhiya May 31 '18 at 06:29

Changing styles and text modification of alert controller in ionic 2

1 Answers1