Ionic2 Popover Change Width

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

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

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

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" }

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.

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

}