Ionic-popover --box-shadow

Ionic Framework Ionic Angular
1

I can’t find out where I have to put --box-shadow css custom property.
I tried in the scss file of the component, of the hosting page, in the global scss… but I can’t see any shadow.
Any help is appreciated

P.

2

how did you try it?

ion-popover { 
  --box-shadow: //value here
}

?

3

The Ion Popover Controller can have a css Class. Try maybe to declare a css Class globally, with the box shadow, and give this class to the popover.

4

Oh, yeah!
In the scss of the popover, in that of the hosting page and in global css, too!

5

How can I assign a class to the popover? Thanks!

6

You are creating the Popover with the Popover Controller right? There in the options must be an option for cssClass:

7

Yes, I know. But where I have to put the css value? In the scss file of the popover, of the host page, where?
Thanks.

8

Try to put it in your global scss file. I think it is under theme?

9

I tried in:
global.scss
variables.scss under theme
popover.scss
page-with-popover.scss
with:

ion-popover { 
  --box-shadow: 50px;
}

and

.ion-popover { 
  --box-shadow: 50px;
}

I also tried with a new class, but I can’t understand where I have to put it: popover never appears in html files…

P.

10

Could it be, that you’re testing on an iOS (emulated) device?

If you take a look at the latest master branch of the Ionic source code, popover component, the CSS variables, you’re using are correct:

The generic popover CSS includes it:

The android platform specific CSS too:

The iOS platform specific CSS not:

That means, that Ionic does not provide any box shadows CSS variables for iOS platforms, proof it here:

Without testing it by myself, could you check it?

Hope it helps.

Cheers
Unkn0wn0x