Popover doesn't show backdrop

ionic-v1
1

Hi Ionites, I’ve been in a strange situation where my popover doesn’t show backdrop… Any idea? Thanks

Html:

<ion-header-bar align-title="center" class="bar-assertive">
       <div class="buttons">
              <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
       </div>
       <h2 class="title">Messages</h2>
       <div class="buttons">
              <button class="button button-icon ion-android-more-vertical" ng-click="openPopover($event)">
       </button>
   </div>

Js:

$ionicPopover.fromTemplateUrl('templates/popover1.html', {
          scope: $scope,
    }).then(function(popover) {
         $scope.popover = popover;
 });

 $scope.openPopover = function($event) {
         $scope.popover.show($event);
  };
$scope.closePopover = function() {
     $scope.popover.hide();
 };
  //Cleanup the popover when we're done with it!
 $scope.$on('$destroy', function() {
       $scope.popover.remove();
 });
 // Execute action on hidden popover
$scope.$on('popover.hidden', function() {
 // Execute action
 });
// Execute action on remove popover
$scope.$on('popover.removed', function() {
 // Execute action
});
2

I added in my css and it works now… I don’t know what was wrong… Any insights?

.popover-backdrop.active{
background-color: rgba(0, 0, 0, 0.1) !important;
}

3

Try

.backdrop.active {
background-color: rgba(0, 0, 0, 0.1) !important;
}

Also, did you check for any html errors in your templates/popover1.html

4

nothing was wrong with the popover.html… Don’t know why but only the popover has no backdrop when showing… while the rest like modals, popup etc. has backdrop…