Popover width on IONIC 4?

I need modify popover size on IONIC 4 but NOT WORK USING

$popover-md-width: 320px;
$popover-ios-width: 320px;
$popover-wp-width: 320px;

Thanks!

1 Like

Finally I’ve add this:

ion-popover{
ion-backdrop{
opacity: 0.5 !important;
}
.popover-wrapper{
.popover-content{
width:80vw;
max-width:500px;
}
}
}

on variables.scss

6 Likes

It worked for me too. Thanks.

Popover width can be modified on a global level bij adding the following to the variables.scss file:

ion-popover {
	--width: 320px;
}

Perfect thank you! This is just what i needed. IOS was for some reason have a small width. I decided to fix it with a set width and this solved all issues and looks perfect. Good recommendation.

Any idea of how to do this on a per invocation basis?

I want to have popovers at different widths based on the reason I’m invoking them. Having it at the global level seems like a poor solution.

How many different size implementations would you need? You could try multiple global classes, and change the cssClass property in the the popover config to fit your needs

The way I have interpreted the right way to build, is that css should ideally be set at the component level.
Wouldn’t I ideally set my popover css in the component.scss instead of globally? Or is setting it globally a “feature”?

I’ll look at setting multiple global classes and try that, it just seems counterintuitive to creating easily exported/imported re-usable components.

Less a “feature” than a “requirement”, due to the way they’re handled in the DOM.