Ionic: how can I change the width of $ ionicPopup?

Question

I am trying to change the width of $ ionicPopup; I tried using the following css code to import it into cssClass: my-popup :

 .my-popup { width: 400; } 

But that did not work.

I really got stuck there and currently cannot find a solution.

Any help would be greatly appreciated. Thanks.

Answer 1

Put the following in the src / theme / variables.scss file;

 $popover-ios-width: 300px; 

Answer 2

This is pretty straight forward, see the following example:

 var pinPopup = $ionicPopup.show({ templateUrl : 'app/user-profile/user-pin.html', title: '4-digit Security PIN', scope : $scope, cssClass: 'my-popup', buttons : [ { text : 'Cancel', }, { text : '<b>Save</b>', type: 'button-positive', onTap : function(e) { var val = document.getElementById('pin-output').value; $scope.userRow.password = val; } } ] }) 

Now in your CSS just do:

 .my-popup .popup { width: 400px; }