CODEWITHSUNDEEP
ionic3
Cosmas
Cosmas

Reputation: 51

How to give different styling to multiple popovers in ionic 3

I already have the code below in my theme/variables.scss file but it's affecting all my popovers.

$popover-md-width: 90%;
$popover-ios-width: 90%;
$popover-wp-width: 90%;
$popover-md-border-radius:2px;

Upvotes: 2

Views: 2036

Answers (2)

Diesel
Diesel

Reputation: 5335

For anyone who lands here for Ionic 4

In ionic 4 the documentation states css properties of a popover are:

--width:    Width of the popover

You can set this by going to variables.scss and changing

ion-popover {
  --width: 50%
}

or to change a specific popover passing a css class to the popover such as:

const popover = await this.popoverCtrl.create({
      component: FilterComponent,
      event: event,
      translucent: true,
      cssClass: 'filterPopover'
    });

and then putting this in your variables.scss

  .filterPopover {
    --width: 70%;
  }

Similar to the other answer (which helped me out a lot), but not using classes ionic creates behind the scenes.

Upvotes: 1

Cosmas
Cosmas

Reputation: 51

I've found a solution to it.

$popover-md-width: 90%;
$popover-ios-width: 90%;
$popover-wp-width: 90%;
$popover-md-border-radius:2px;

will affect the code globally, below is the fix.

In the ts file where you wrote the popover code, set a cssClass eg.

photo1() { let popover = this.popoverCtrl.create( ImageModalPage, {} , { cssClass: ' custom-popover ' }); popover.present(); }

Then go to your app.scss and style the popover eg.

.custom-popover .popover-content{ width: 90% !important; color: red; };

Enjoy!!!

Upvotes: 3

Related Questions