8

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?

Mudasser Ajaz
  • 6,197
  • 1
  • 26
  • 29
Batzi
  • 369
  • 2
  • 7
  • 15

1 Answers1

21

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

Mudasser Ajaz
  • 6,197
  • 1
  • 26
  • 29
  • 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: http://stackoverflow.com/a/37482545/52160 – Raymond Camden May 27 '16 at 11:56