I see in the doc of $ionicPopup, there is a property ‘cssClass’ says it for custom css but i don’t know how to use it. I try to put the name of a class into it but nothing happened, could i use it to customize the popup?
try using like
…
cssClass: ‘yourclass’
…
.yourclass .popup{ }
.yourclass .popup .popup-head{ }
.yourclass .popup .popup-body{ }
I’ve tried it but it doesn’t work
I was also not able to get it to work, unfortunately. I’m still looking for solutions, but for right now I just had to edit the raw SCSS files and compile those. I think it has it’s own sub less file you can modify. Then you just compile that and it should alter that style, not the best method, but I can’t get anything else to work!
You need to be more specific with the css. Pass the custom class in cssClass
:
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
cssClass: 'custom-popup'
...
});
Then in the CSS:
.custom-popup.popup-container .popup {
background-color: green;
}
Codepen example: http://codepen.io/brandyshea/pen/qdORmj
You are a life saver. Thank you!!!
I don’t know why it doesn’t work for me. Checking with “inspect element” i don’t see it generates the class “custom-popup”. Does it cause by the version of ionic, i’m using beta13 ?
Yes, it wasn’t introduced in beta 13. You can use the dropdown in the upper left of the docs to see the documentation for that version: http://ionicframework.com/docs/1.0.0-beta.13/api/service/$ionicPopup/
Oh, my bad. Thank you for your help!
How do I apply custom css for only one popup. With the above method…the css will reflect in all the pop ups