Ionic Popover component Resizing

Ionic Framework Ionic Angular
1

Hi

I am having an issue with the resizing of the popover in my project. I searched everywhere and found on the forums here a few older solutions.

I understand that the popover is out of the page so you can’t apply scss to it within the same component page, so you must define it in the global.scss file that you have.

I did just that:

 ion-popover {
       ion-backdrop  {
         opacity: 0.20 !important
       }
       .popover-wrapper{
          .popover-content{
            width: 50vw;
            height: 55vw;
            max-height: 100px;
            max-width: 250px;
         }
       }
     }

This works. But it applies it to every single popover I have in my app. I don’t want that to happen.

I tried to:

  1. Apply a class within the definition of the popover, as such;

cssClass: ‘bla’

but that doesn’t work when I define it as

.bla .popover-content {
  ..
}

Nothing else seems to work… and I cannot find any proper documentation on this.

Could you please help?

Elias

2

This should work. Can you inspect the popover and check if the class is applied? Often the Problem here is a missing !important, because the Styles get#s overwritten.

3

I just checked if the class is being applied from the get-go but it’s not… pretty weird?

This is how I define it in my component:

async presentPopover(ev: any) {
  const popover = await this.popoverController.create({
    cssClass: 'terminal-pop',
    component: PopTermComponent,
    event: ev,
    translucent: false,
  });
  return await popover.present();

  }
4

I just manually added the cssClass to the component and it works but the class isn’t being added to the popover when it’s made… hmm…

5

Okay I just re-wrote it and it worked… lol. Weird but ok