Ionic2 Popover Change Width

Question

I want to change the popover width of only 1 page. I tried this:

I do not want to use this $popover-ios-width in variable.scss files since it changes the width on all pages.

Answer 1

You can create a custom class for only this popover and pass it in the cssClass on it's options

let's say you have this:

.custom-popover {
  width: 60%;
}

In your popover creation you'll just insert it as the cssClass on the options

const customPopOver = this.popover.create({ yourPopoverPage, yourData, { cssClass: 'custom-popover'}});
customPopOver.present();

Hope this helps :D

Answer 2

@gabriel-barreto's answer is totally fine. However, I guess it needs an additional consideration in other versions.

In Ionic 3.6 the custom class is added to the <ion-popover> element. In order to override the default width rule set in .popover-content class, your selector should be:

.custom-popover .popover-content {
  width: 60%;
}