How to change the width of the ionic popover

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.

Alex Ryltsov · Accepted Answer · 2022-09-19 09:02:04Z

9

For ionic 6.x the solution is

ion-popover { &::part(content) { min-width: 230px; } }

answered Sep 19, 2022 at 9:02

Alex Ryltsov

3,0391 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

fa__ Over a year ago

Is there a way to have a solution that applies to only one page and not the full web app?

Alex Ryltsov Over a year ago

yes (if I understand the question correctly). Just add a css class to your popover and use it in scss/css file

fa__ Over a year ago

It does not work. I change first line for your code to .my-class ion-popover or .my-class and add the class to my popover and it is not working.

Alex Ryltsov Over a year ago

I think that you are doing smth wrong. First, please try to add this to app.scss. The second, this is wrong .my-class ion-popover

Darrow Hartman · Accepted Answer · 2021-04-24 23:25:23Z

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

Once again the absurdity of Ionic's use of the shadom dom strikes.They want self-contained lazy loaded components but they must be styled in the global stylesheet to work... ie not self-contained...

rick · Accepted Answer · 2022-01-26 07:37:21Z

3

Ionic ^4 Popover width can be modified on a global level adding the following to the styles.scss file:

ion-popover { --width: 320px; }

answered Jan 26, 2022 at 7:37

rick

5875 silver badges16 bronze badges

1 Comment

dmoo Feb 18 at 15:06

Can also narrow this down by passing a css class to your popover - cssClass: 'paging-popover' and updating the scss to ion-popover.paging-popover { --width: 450px; }

Micha · Accepted Answer · 2019-08-27 09:57:39Z

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.

answered Aug 27, 2019 at 9:57

Micha

9206 silver badges11 bronze badges

3 Comments

Shaik Over a year ago

thank you@Micha for your answer, but where exactly should i need to put this line of code "let popover = this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})" in my code.

Micha Over a year ago

put the line $popover-md-width: 320px; $popover-ios-width: 320px; $popover-wp-width: 320px; in the popover.page.scss to overwrite the existing style !

Micha Over a year ago

sorry I have no complete example running here, but what you can try last is to insert in scss-file .custom-popover .popover-content{ width: 90% !important; color: red; };

Ifelere Bolaji · Accepted Answer · 2023-03-02 20:47:23Z

What has worked for me in ionic 6 is not to target the content but the host itself. After setting the cssClass option as previously answered like this:

this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})

I added the equivalent in global.scss:

.contact-popover { --width: <custom width>; }

Arthurx · Accepted Answer · 2023-11-10 14:13:58Z

I decided to add a class to an element property and then edit the scss in global.scss

.custom-popover { --width: 100%; }

<ion-item class="text-center" lines="none"> <ion-select interface="popover"[interfaceOptions]="customPopoverOptions"> </ion-select> </ion-item>

 customPopoverOptions = { cssClass: 'custom-popover', animated: true, };

Roberto Valenza · Accepted Answer · 2023-10-18 08:20:48Z

I solved adding a css class like this on the element in html, and then edit scss file, hope this will be useful for you.

::ng-deep .wider-popover { --width: fit-content; }

<ion-select [interfaceOptions]="{'cssClass': 'wider-popover'}"></ion-select>

Collectives™ on Stack Overflow

How to change the width of the ionic popover

7 Answers 7

4 Comments

1 Comment

1 Comment

3 Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

1 Comment

1 Comment

3 Comments

Comments

2 Comments

Comments

Related