Popover styling

#1

I am trying to use popOver on a page with the popOver having a few icons. Everything is working fine except that I cannot increase the width of the popover and I get a scroll bar at the bottom if I increase the width in the style sheet.

I am using ionic2 with the following method:

presentPopover(myEvent) { 
   let popover = Popover.create(PopoverPage); 
   this.nav.present(popover, { 
     ev: myEvent 
   }); 
}

and the template for the popover is:
(pls note that I have replaced < and > with | as otherwise it gets formatted as html page)

<ion-grid class="popover-page">
  <ion-row>
    <ion-col>
      <img src="img/a.jpg">
    </ion-col>
    <ion-col>
      <img src="img/b.jpg">
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <img src="img/c.jpg">
    </ion-col>
    <ion-col>
      <img src="img/d.jpg">
    </ion-col>
  </ion-row>
</ion-grid>

Appreciate any help.

thanks
Angelo

Popover position and transition
#2

Would you be able to recreate this in a plunkr?

Also, you can format your code between three `, three at the top and three at the bottom.

```
sample
```
#3

Hey Angelo, two ways.

  1. override the SCSS variables;

$popover-md-width: 320px; $popover-ios-width: 320px; $popover-wp-width: 320px;

or 2. give your popover a class:

let popover = this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})

and then style the .popover-content:

.contact-popover .popover-content{ width: 320px; }

Ionic automatically calculates the correct position for your custom width popover.

Popover width
#4

Hi Mayteio this has to be the answer, but I can’t work out where to put your suggestions. I have generated a page called GoHomePage, which makes me file called go-home.scss that only has

page-go-home {
}

I call it with this:

let popover = this.popoverCtrl.create(GoHomePage, {}, {cssClass: 'page-go-home'});

Now I can style individual elements in the template file, so I figure the reference in call is correct, but nothing I do will let me change the size or position of the popover itself. If you have any further suggestions I’d be most grateful.

Here is my template:

<ion-header>
  <ion-navbar>
    <ion-title>Start Again?</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list class="homelist">
    <ion-list-header>Really Start Again?</ion-list-header>
      <button ion-button color="active" (click)="close('yes')"><ion-icon name="checkmark-circle"></ion-icon>Yes</button>
      <button ion-button color="danger" (click)="close('no')"><ion-icon name="close-circle"></ion-icon>No</button>
    </ion-list>
</ion-content>
#5

Worked out the first part. See this page https://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

Add new variables, not just the ones already in the default file.

#6

Hi, I tried to pass the cssClass but it doesn’t take any effect, any idea?

#7

I found that the cssClass should defined in the app.scss, n it works like charm!!