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 = 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?

Solution

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

Comments

[Raymond Camden]

As just an FYI, you may need to use !important to get things like width working. Thanks to @lulu88 for the info. See the discussion (and her CodePen) here: stackoverflow.com/a/37482545/52160