ionic2: how to customize popover width?

Question

I'm using Ionic2: I use a popover and I want to customize the size of every popover. This is the popover:

I want to decrease it's widt. I used this code in variable.scss file:

$popover-md-width:50%;

It works fine but it is applied for every popover in my application. I want to customize the width of some popover. What should I do?

Answer 1

The create method accepts a third parameter:

create(component, data, opts)

Where opts is of type PopoverOptions

And one of these options, is the cssClass property:

Option      Type    Description
cssClass    string  Additional classes for custom styles, separated by spaces.

So you can add a custom class when creating the popover:

import { PopoverController } from 'ionic-angular';

@Component({})
class MyPage {
  constructor(public popoverCtrl: PopoverController) {}

  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'my-custom-popover'});
    popover.present({
      ev: myEvent
    });
  }
}

And then use that class to apply the custom styling.

Answer 2

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

presentPopover() {
    let popover = this.popoverCtrl.create( PopoverPage, {} , { 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;
};