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.

Solution 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

Solution 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%;
}

Solution 3

Add this below code in variables.scss. works for me in Ionic 4.

ion-popover {
  .popover-wrapper {
   .popover-content {
     width: fit-content;
     max-width: 300px;
   }
  }
}

Solution 4

I do not know if it will still suit you, I found the same problem, but modifying the global variable scss configuration did not help me because I used multiple PopoverControllers in the project the only way I managed to do it is the following:

1. Place the ion-content as a parent element and add the id attribute
2. Get Parent Items to the Main Container:

ionViewDidLoad() {
    let element = document.getElementById('id')
    let parent=element.parentElement
    let parent2 = parent.parentElement //popover-content
    parent2.parentElement.style['width'] = "92px"
}

View more solutions