How to change the width of the ionic popover - ionic-framework

Question

I had created the ionic popup. Created a popover page and added action on button click to display popover from home page. but iam unable to change the width of the popover. below is the code;
home.page.html:
<ion-content>
<ion-button expand="full" (click)="openPopover($Event)">Open popover</ion-button>
</ion-content>
home.page.ts:
async openPopover(ev: Event) {
const popover = await this.popoverController.create({
component:PopoverPage,
componentProps: {
custom_id: this.value
},
});
popover.present();
}
popover.page.html:
<ion-content>
<ion-list>
<ion-item>
this is popover
</ion-item>
<ion-item button color="danger" (click) = "closePopover()">
<ion-icon name="close" slot="start"></ion-icon>
Close Popover
</ion-item>
</ion-list>
</ion-content>
popover.page.ts:
closePopover() {
this.popoverController.dismiss();
}
please assist me how can i change the width of the popover as i tried adding custom css to the ion-content of the popover page but its not working.

Answer 1

The other method did not work for me, these changes need to be made:
First the .contact-popover .popover-content{ width: 320px; } content needs to be in global.scss
" This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the src/global.scss file or you can register a new global style file by adding to the styles build option in angular.json." (says in documentation)
Second the CSS cannot be width, it needs to be --width. The custom css properties for this are at the bottom of this: https://ionicframework.com/docs/api/popover

Answer 2

two ways:
override the SCSS variables;
$popover-md-width: 320px; $popover-ios-width: 320px; $popover-wp-width: 320px;
or 2. give your popover a class:
let popover = this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})
and then style the .popover-content:
.contact-popover .popover-content{ width: 320px; }
Ionic automatically calculates the correct position for your custom width popover.

Answer 3

Ionic ^4 Popover width can be modified on a global level adding the following to the styles.scss file:
ion-popover {
--width: 320px;
}

Answer 4

For ionic 6.x the solution is
ion-popover {
&::part(content) {
min-width: 230px;
}
}