How to style an ionic HTML template?


#1

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="new.date"><br><label>Nombre de personne(s)</label><br><input type="number" min="1" max="100" maxlength="3" ng-model="new.nbPersonne"></div>'

var myPopup = $ionicPopup.show({
        template: newPopupTemplate,
        title: '',
        subTitle: 'Please use normal things',
        scope: $scope,
        buttons: [
              { text: 'Annuler' },
              {
                text: '<b>Créer</b>',
                type: 'button-positive',
                  }
                }
              }
            ]
          });
  };
}]); 
.center-form{
 
    label{
        background-color: rgba(255,255,255,0.7);
        border-color: rgba(255,255,255,0);
        
        &.top-input{
            font-weight:300;
            border-radius: 4px 4px 0px 0px !important;
        }
        
        &.bottom-input{
            font-weight:300;
            border-radius: 0px 0px 4px 4px !important;
        }
    }
    
    .button-positive{
        opacity:0.9;
    }
    
}

Thank you guys ! :slight_smile:


#2

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: