Ionic popup customize

Question

I'm trying to modify the size of a pop up. But I'm not having success.

I have this popup template:

    <ion-view>
        <ion-content scroll="false" class="">
            test
        </ion-content>
    </ion-view>

And in my controller:

$scope.openFilter = function() {
    var popupFilter = $ionicPopup.prompt({
          templateUrl: 'templates/popup-template-filter.html',
          scope: $scope
    })

    $scope.close = function() {
      popupFilter.close();
    }
  }

In my Sass,i tried this and it worked:

.popup {  
     width: 100% !important; 
     height: 180px !important; 
     position: fixed !important;
     bottom: 0 !important;
}

However I have more than one popup in my project, and I would like to individually modify.

And my second question how can I close the popup? I found examples but none of popup with customizable template

Thankss

score 1 · Accepted Answer · edited May 23 '17 at 11:45

In this post, you can declare the css Master Class to modify your popups individually:

Ionic: how to use cssClass in $ionicPopup?

You just have to do this:

 .my-custom-popup{
   .popup{
    //styling for popup width, width: 300px;
   }
   .popup-title{
     //styling for title
   }
 }

and then this:

 var popupScore = $ionicPopup.alert({

  title:'Score',
  template: 'Total XP points: 50',
  cssClass: 'my-custom-popup',
  buttons: [{
  text:'Return',
  type: 'button-assertive'
}]}}

Hope it helps!

pd. in the documentation, it shows all the attributes you can add to your popup including this one, custom css class:

https://ionicframework.com/docs/api/service/$ionicPopup/

Ionic popup customize

1 Answers1