Ionic 4 Pop over styling

Ionic Framework
1

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

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

3

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

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

3 Likes
5

Works! Thank you sir!

6

Congrats, glad it worked!

7

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();
  }
2 Likes
8

Thanks you it worked for me also.

9

the question is WHERE?

I set it globally like this:

ion-content {
   --min-with: 80vw;
}

still not working

10

If you want to set the ion-content width you can use something like this in global.css

ion-content {
  --min-width: 80vw !important;
  min-width: 80vw !important;
}
1 Like