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

If you only want to change the placement of the popover relative to the pressed element, CSS transformations might help. E.g. to place it to the top-right / left-bottom of the clicked element, instead of default bottom-right corner.

Add cssClass option:

let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'popover-top-right'});

popover.present({
  ev: event
});

and use the following CSS somewhere:

.popover-top-right .popover-content {
  transform: translateY(-120%) !important;
}

This solution is somewhat like Mnemo suggested, but more generic as you don't need to specify fixed coordinates. Though it's not that customizable as the accepted workaround from Schlaus.

This way you can use translateXY(-100%, -100%) to put the popover to the left-top corner, etc. The !important is perhaps needed to override ionic styles (or use more specific CSS selector instead).