Ionic2 Popover Change Width - ionic-framework

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

Answer 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;
}
}
}

Answer 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:
Place the ion-content as a parent element and add the id attribute
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"
}

Answer 5

Try this...
myPopOver = this.popovercontroller.create({ component: MyCustomComponent,
event:ev,
cssClass: 'my-custom-popover'
})
myPopOver.present();
add my-custom-popover class in global.css file.

Answer 6

const customPopOver = this.popover.create({ yourPopoverPage, yourData, { cssClass: 'custom-popover'}});
You need to create popover and add cssClass prop as on code above, then you can use 'custom-popover' class in variables.scss file like below.
.custom-popover {
.popover-wrapper {
.popover-content {
width: 465px;
}
}
}