Popover styling

Ionic Framework ionic-v3
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

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.

15 Likes
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!!

1 Like
8

Do not add your css between

page-go-home {
}

Because the popover is generated outside the selected page. When you add is like this it should work, got the same thing myself too.

So the CSS would look like this.

page-go-home {
}
.contact-popover .popover-content{ width: 320px; }
2 Likes
9

This worked. for me. thanks a lot.
cssClass should defined in the app.scss.