Popover width on IONIC 4?

Ionic Framework
1

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
2

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

8 Likes
3

It worked for me too. Thanks.

4

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

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

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.

1 Like
6

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.

7

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

8

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.

9

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

10

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.

1 Like
11

It worked!! Thank you!

13

This really works, thanks Clickgraphics