Ionic 4 popover appearing off screen

Question

I have an Ionic 4 Popover on a button on the bottom of the screen. When I click the button to open the popover, it appears off-screen underneath...

.html

<div class="TabBarItem" (click)="popover($event)"> <label>Tab Item</label> </div>

.ts

 function popover(ev) { this.popoverController .create({ component: PopoverComponent, event: ev, translucent: true, }) .then(el => { el.present(); }); }

Result...

Is there a way to fix this, or manually reposition it?

This might help: stackoverflow.com/questions/40524197/… If not, try to provide a Stackblitz example replicating the issue :) — JossFD
– JossFD, Commented Jun 20, 2019 at 0:34

nachshon f · Accepted Answer · 2019-06-20 19:45:35Z

7

Turns out all I had to do is add <ion-content> to my popover component. This fixed the issue.

edited Jun 20, 2019 at 19:45

answered Jun 20, 2019 at 3:02

nachshon f

3,7409 gold badges37 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mario.van.zadel Over a year ago

In my case, I had an *ngIf at the ion-content element. Moving the *ngIf to an inner element solved the problems. Seems the ion-content wasn't already there when the popover is rendered.

Scooby27 Aug 25 at 4:04

That was it for me too, standard div doesn't play nicely with ionic's positioning near the screen edge

Collectives™ on Stack Overflow

Ionic 4 popover appearing off screen

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related