Question

106

Ionic: how to use cssClass in $ionicPopup?

rated 0 times [ 109] [ 3] / answers: 1 / hits: 15935 / 9 Years ago, thu, september 17, 2015, 12:00:00

So I want to modify the default width in $ionicPopup and to do so I have to add 'cssClass' to my popup object just like the code below

  $scope.getScore = function(){

  var popupScore = $ionicPopup.alert({



  title:'Score',

  template: 'Total XP points: 50',

  cssClass: '',

  buttons: [{

    text:'Return',

    type: 'button-assertive'

  }]}}

How would you proceed in this case? Should I give cssClass a value? (i.e: cssClass = 'popupClass') and then go to my CSS file and modify the width from there?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keyanah

Add To Favorites

Follow

Total Points: 642

Total Questions: 93

Total Answers: 114

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

answered 9 Years ago marcos · Accepted Answer

Just define a mother class and override .popup default ionic class inside this way

   .my-custom-popup{

      .popup{

        //styling for popup width, width: 300px;

      }

      .popup-title{

        //styling for title

      }

    }

and pass my-custom-popup in cssClass

 var popupScore = $ionicPopup.alert({



  title:'Score',

  template: 'Total XP points: 50',

  cssClass: 'my-custom-popup',

  buttons: [{

    text:'Return',

    type: 'button-assertive'

  }]}}

Here is the list of classes which you can override or customize in your parent class

.popup

.popup-head

.popup-title

.popup-sub-title

.popup-body

.popup-buttons.row

.popup-buttons .button