Ionic: how to use cssClass in $ionicPopup?

Question

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 =          


        

Answer 1

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