Ionic 4 Pop over styling

Hello everyone, I’m trying to stylize my popover with the cssClass property as stated in the docs but it does not seem to be working. By default the width of the popover content is 170px but I need it to over the width of the device. How can i achieve this? I looked at other post but they seem to be in ionic 3 and not working.

Home.ts:

async openPopOver(ev: Event) {
    const popover = await this.popoverCtrl.create({
      component: PopOverPage,
      event: ev,
      cssClass: 'pop-over-style'
    });
    popover.present();
  }

home.css

.pop-over-style {
    .popover-content {
        //width: 80% !important; - this wont work or the bottom one.
        --width: 300px !important;
    }
}

These are the ionic 4 docs - https://ionicframework.com/docs/api/popover#css-custom-properties
You can use --min-width for popover width.

thank you for your response. I have tried what you suggested but it does not work.

.pop-over-style .popover-content {
    --min-width: 300px !important;
}
1 Like

Try to put the css into the ionic global css file.

3 Likes

Works! Thank you sir!

Congrats, glad it worked!

I also had this issue and cannot reliably get the style to apply via classes in the global.scss file. I found that this code works for limited purposes:

  async presentCustomPopover() {
    const popover = await this.popoverController.create({
      component: CustomPopoverPage
    });

    popover.style.cssText = '--min-width: 250px; --max-width: 270px;';
    return popover.present();
  }
1 Like

Thanks you it worked for me also.