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.

Thanks to the support here I got it working:

When calling the popover component:

async popoverDetailComponent(componentProps, cssClass) {

  const popover = await this.popover.create({
    component: PopoverDetailComponent ,
    componentProps,
    cssClass
  });
  //Sync event from popover component 
  await popover.present();
  const { data } = await popover.onDidDismiss();
  return data;
  }
}
// get some data back:
let data = await this.popoverDetailComponent({...props},"smaller-popover");

And then in variables.scss:

.contact-popover .popover-content{ width: 900px; }
.smaller-popover .popover-content{ width: 300px; }

Now when the popover is called the styling can be set based on the purpose of the pop-over.

Thanks again for the help.