How to style an ionic HTML template?

Question

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 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 ?

(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 ! :)

You can inspect the DOM while on ionic serve. Then you can see all classes and tags that are created and add the desired css on your stylesheet document. Propably there is something wrong with the preprocessor. Check if the stylesheet you provide is applied on your document. — korteee, Dec 09 '16 at 20:45
Thank you for you answer, mmh...I'm working on ionic creator, so I don't have access to the preprocessor, any other idea ? :/ — Memphis, Dec 11 '16 at 17:39
https://forum.ionicframework.com/t/how-to-style-ionicpopup-alert/3228 — Marko, Dec 12 '16 at 00:19

How to style an ionic HTML template?

0 Answers0