How to style an ionic HTML template?


Hi guys !

I would like to know how to style an ionic HTML template (newPopupTemplate) that I coded into my “directive.js” file, I tried to add a div with a CSS class added, but it doesn’t work…And ideally, I’d prefer to style each elements (label, input…etc) with their proper CSS class, is that possible with the ionic creator ?

(this code below works, I just deleted some useless parts to clarify :))

myApp.controller('MainCtrl', ['$scope', '$ionicPopup', '$timeout', function ($scope, $ionicPopup, $timeout) {
$scope.createPopUp = function(){

// I would like to style this template, is it possible to style each element with their proper CSS class ?
var newPopupTemplate = '<div class="top-input"><br><label>Date et heure</label><input type="datetime-local" ng-model=""><br><label>Nombre de personne(s)</label><br><input type="number" min="1" max="100" maxlength="3" ng-model="new.nbPersonne"></div>'

var myPopup = ${
        template: newPopupTemplate,
        title: '',
        subTitle: 'Please use normal things',
        scope: $scope,
        buttons: [
              { text: 'Annuler' },
                text: '<b>Créer</b>',
                type: 'button-positive',
        background-color: rgba(255,255,255,0.7);
        border-color: rgba(255,255,255,0);
            border-radius: 4px 4px 0px 0px !important;
            border-radius: 0px 0px 4px 4px !important;

Thank you guys ! :slight_smile:


No one never answer on this forum… :frowning2:

I fixed that problem by adding this line : cssClass: ‘popJoinService’, in my popup function.

‘popJoinService’ is a global CSS class. :wink: