How to position a popover in Ionic 2

Question

How do I manually position a popover in Ionic 2?

I can\'t set the position in a css class, since the popover controller sets the position with an inline style.

Answer 1

So I was finding something similar for my recent project where I wanted to place the ion-popover to the bottom instead of it's default position. Something similar to Android's Bottom Sheet.

After looking into several answers and doing a bit of tweaks on my own, I found a way to fix this.

Step 1: Assign a class to the Pop-Over:

this.popover = await this.popoverController.create({
      component: AddToCartComponentComponent,
      event: ev,
      translucent: true,
      animated: false,
      cssClass: 'bottom-sheet-popover'
    });

Step 2: Adding CSS

Once you assign a custom class to your pop-over element during the creation, head over to the global CSS and implement these tweaks:

.bottom-sheet-popover .popover-content {
    width: 100% !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    top: calc(100% - 200px) !important;
    max-height: 200px;
    min-height: 200px; 
  }

That's it. You're done.

Note: This works well with Ionic 4.