Popover background color issue

Ionic Framework Ionic Angular
1

Hi guys!

I’m trying to set the background of a popover without success. I am following the documentation and use ionic 5 with angular. In particular I have this style:

global.scss

.my-custom-class {
        --background: var(--ion-color-light)
    }

I’m opening the popover like this:

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    return await popover.present();
  }
2

I’m unsure, but it may be overwritten. Try to add !important:

.my-custom-class {
    --background: var(--ion-color-light) !important;
}
3

Thanks for the response! Trying with !important but still not working, it seems like this property is not be considered.

4

If you inspect the Popover, is the Class applied? What happens to the Style?

5

Yes, the class is applied and --background property is correctly setted but it don’t have effect on the popover

6

How is your Popover build? Post it’s html if you can

7

Here’s the popover in DOM.

<ion-popover class="sc-ion-popover-ios-h sc-ion-popover-ios-s my-custom-class ios popover-translucent hydrated" id="ion-overlay-19" aria-modal="true" no-router="" tabindex="-1" style="z-index: 20019;"><ion-backdrop class="sc-ion-popover-ios ios hydrated" tabindex="-1" style=""></ion-backdrop><div tabindex="0" class="sc-ion-popover-ios"></div><div class="popover-wrapper ion-overlay-wrapper sc-ion-popover-ios"><div class="popover-arrow sc-ion-popover-ios" style="top: 192.047px; left: 26.1641px;"></div><div class="popover-content sc-ion-popover-ios" style="top: 201.047px; left: calc(5px + var(--ion-safe-area-left, 0px)); transform-origin: left top;"><app-info-partner-personificato _nghost-lrr-c158="" class="popover-viewport sc-ion-popover-ios"><ion-list _ngcontent-lrr-c158="" class="ios list-ios hydrated"><ion-list-header _ngcontent-lrr-c158="" class="ios hydrated"><ion-label _ngcontent-lrr-c158="" color="primary" class="font-weight-bold sc-ion-label-ios-h sc-ion-label-ios-s ion-color ion-color-primary ios hydrated" style="font-size: small;" ng-reflect-color="primary">Partner personificato</ion-label></ion-list-header><ion-item _ngcontent-lrr-c158="" lines="none" ng-reflect-lines="none" class="item ios item-lines-none in-list ion-focusable hydrated item-label"><ion-label _ngcontent-lrr-c158="" class="ion-text-wrap sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" style="font-size: small;">AESSE INFORMATICA DI ANGELO SORIANO</ion-label></ion-item></ion-list></app-info-partner-personificato></div></div><div tabindex="0" class="sc-ion-popover-ios"></div></ion-popover>

I build it with this component calling the presentPopover function:

<ion-list>
  <ion-list-header><ion-label color="primary" style="font-size: small;" class="font-weight-bold">{{'interfaces.partnerPersonificato.titolo' | translate}}</ion-label></ion-list-header>
  <ion-item lines="none"><ion-label class="ion-text-wrap" style="font-size: small;">{{this.authenticationService.partnerPersonificato.Partner.Anagrafica.RagioneSociale}}</ion-label></ion-item>
</ion-list>
8

I’m not sure, does the <ion-list> maybe have it own background color?

2 Likes
9

You’re right! Triyng with a simple ion-label it works! I’ve to override ion-list css in popover. Thank you so much EinfachHans

10

Yes, this is the issue, ion-list is overriding custom styles for popover, you should edit style of ion-list or what ever elements inside the popover custom element.

For me I had to override the style of ion-content element --background: #fff

11

I hope this too help: Can't see popover arrow in dark mode(Chrome and Safari) · Issue #21021 · ionic-team/ionic-framework · GitHub