CODEWITHSUNDEEP
ionic-frameworkpopover
Shaik
Shaik

Reputation: 296

How to change the width of the ionic popover

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.

Upvotes: 4

Views: 16446

Answers (7)

Arthurx
Arthurx

Reputation: 21

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

Upvotes: 0

Roberto Valenza
Roberto Valenza

Reputation: 9

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>

Upvotes: -1

Ifelere Bolaji
Ifelere Bolaji

Reputation: 94

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

Upvotes: 0

Alex Ryltsov
Alex Ryltsov

Reputation: 3013

For ionic 6.x the solution is

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

Upvotes: 9

rick
rick

Reputation: 577

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

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

Upvotes: 3

Darrow Hartman
Darrow Hartman

Reputation: 4373

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

Upvotes: 7

Micha
Micha

Reputation: 924

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.

Upvotes: 2

Related Questions