Popover/ion-backdrop change background opacity/color

Ionic Framework ionic-v3
1

Is there a way to change the background color/opacity of the ion-backdrop within a popover element?

2

Hello, currently Im solving the same problem. The only way I’ve got to work so far is setting opacity of ion-backdrop globally in app.scss like this:

ion-backdrop
  {
  	opacity:0.4;
  }

I’ve found multiple solutions stating that things like:

let popover = this.popoverCtrl.create(Page, {showBackdrop: true, cssClass:"custom-popover"});

and then again in app.scss:

.custom-popover {

  ion-backdrop
  {
  	opacity:0.4;
  }
}

But I didnt get these solutions working… it seems to me like the cssClass option is not working at least for me.

You can use the first option I provided here, but keep in mind that this will affect all ion-backdrop elements in your app… which might be problematic…

3

Yeah, I’ve tried it in app.scss and it works but only if it’s set to !important. I’m looking at some of the animation functions but have no idea how/if I could override those. It seems the opacity is hardcoded.

4

Exactly… im getting a headache from solving this, also documentation is not stating how should have been these things done. I also read somwhere that the opacity might be really hardcoded… someone was even stating some numbers like 0.02 for ios and 0.1 for md or something like that…

I was just about opening my own thread, but I hope someone makes things clear for us here.

5

Opened an issue on Github, the implementation of this boggles my mind why they would even add it if the default value is 0.08… that barely even exists as an opacity…

1 Like
6

Take a look at my comment here: https://github.com/ionic-team/ionic/issues/9105, for now I created a custom transition for popovers off of the original. Hope this helps you all while Ionic works on a customizable solution.

7

your code is correct need small modification…
Try this one
let popover = this.popoverCtrl.create(Page,{ }, {showBackdrop: true, cssClass:“custom-popover”});
Note: put your css inside app.css