Vinicius Murad Vinicius Murad - 18 days ago 28
AngularJS Question

Ionic popup customize

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

Answer

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/

Comments